Question

我的html和css结构在下面的图片中遇到了这个布局的麻烦。

你能给我一些如何正确完成它的建议吗？如何将左侧部分和右侧部分与表格分开，因为我希望能够创建这个全高度的黑色透明背景？

这是我的代码，直到现在。

＆＃13;

.enroll-bg { background: linear-gradient(  rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.52)), url(https://s30.postimg.org/6uy1f1rxd/enroll_bg.jpg) 0 0 no-repeat; background-size: cover; padding: 40px 0 230px 0; width: 100%; }

.form-container { position: relative; }
.form-wrapper { position: absolute; bottom: -230px; right: 0; left: 50%;  background: red;  width: 539px; height: 520px; }

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<header class="header">
  <div class="enroll-bg">
    <div class="container">
      <div class="row">
        <div class="col-md-6">
          <div class="enroll-logo">
            <div class="logo">
              <a href="#">logo</a>
            </div>
            <!-- logo -->
          </div>
          <!-- enroll-logo -->
          <div class="enroll-content">
            <h1>Enroll today and <span>save money &amp; time</span></h1>
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.Com sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
          </div>
          <!-- enroll-content -->
        </div>
        <!-- col-md-6 -->
      </div>
      <!-- row -->
      <div class="form-container">
        <form action="#" class="form-wrapper">
          <div class="form-content">
            <p>
              <input type="text" id="fname" name="firstname" placeholder="Full Name..." required="required" class="field">
            </p>
            <p>
              <input type="text" id="fname" name="firstname" placeholder="+44 01 234 5678" required="required" class="field">
            </p>
            <p>
              <input type="email" id="email" name="email" placeholder="Email Address..." required="required" class="field">
            </p>
            <p>
              <input type="email" id="confirm-email" name="confirm-email" placeholder="Confirm Email..." required="required" class="field">
            </p>
            <p>
              <input type="text" id="electric-provider" name="electric-provider" placeholder="Current Electric Provider..." required="required" class="field">
            </p>
            <p>
              <input type="text" id="gas-provider" name="gas-provider" placeholder="Current Gas Provider..." required="required" class="field">
            </p>
            <div class="form-actions">
              <button type="button" class="btn btn-danger">enroll today</button>
            </div>
            <!-- form-actions -->
          </div>
          <!-- form-content -->
        </form>
        <!-- form-wrapper -->
      </div>
      <!-- form-container -->
    </div>
    <!-- container -->
  </div>
  <!-- enroll-bg -->
</header>
<!-- header -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

＆＃13;

Answer 1

我对HTML和CSS做了一些小调整 - 请参阅jsfiddle here。

我已移除.form-wrapper中的位置：绝对值，将表单包裹在.col-xs-6中，并放入相同的.row，以便它与注册内容并列。

每个.row可以包含.col-xx-xx或.col-xx-offset-xx的任意组合，只要这些数字的总和不超过12.您可以阅读有关此{{3}的更多信息}。

HTML：

<div class="enroll-bg">
    <div class="container">
        <div class="row">
            <div class="col-xs-6">
                <div class="enroll-logo">
                    <div class="logo">
                        <a href="#">logo</a>
                    </div>
                </div>
                <div class="enroll-content">
                    <h1>Enroll today and <span>save money &amp; time</span></h1>
                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.Com sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
                </div>
            </div>
            <div class="col-xs-6 form-container">
                <div class="">
                    <form action="#" class="form-wrapper">
                        <div class="form-content">
                            <p>
                                <input type="text" id="fname" name="firstname" placeholder="Full Name..." required="required" class="field">
                            </p>
                            <p>
                                <input type="text" id="fname" name="firstname" placeholder="+44 01 234 5678" required="required" class="field">
                            </p>
                            <p>
                                <input type="email" id="email" name="email" placeholder="Email Address..." required="required" class="field">
                            </p>
                            <p>
                                <input type="email" id="confirm-email" name="confirm-email" placeholder="Confirm Email..." required="required" class="field">
                            </p>
                            <p>
                                <input type="text" id="electric-provider" name="electric-provider" placeholder="Current Electric Provider..." required="required" class="field">
                            </p>
                            <p>
                                <input type="text" id="gas-provider" name="gas-provider" placeholder="Current Gas Provider..." required="required" class="field">
                            </p>
                            <div class="form-actions">
                                <button type="button" class="btn btn-danger">enroll today</button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

CSS：

.enroll-bg { background: linear-gradient(  rgba(0, 0, 0, 0.52), rgba(0, 0, 0, 0.52)), url(https://s30.postimg.org/6uy1f1rxd/enroll_bg.jpg) 0 0 no-repeat; 
background-size: cover; 
width: 100%; }


.form-container {
  height: 100vh;
  background: red;
}

Answer 2

您的表单必须与左栏相同row，另一列col-md-6。

Answer 3

如果是单页，你可能不需要使用boostrap（类和结构）并在flex模型上使用一些媒体查询进行中继，以允许字体大小调整大小并最终分成1列：

header,
main {
  width: 30vw;
  min-width: 360px;
  height: 100vh;
}
html,
header,
form {
  display: flex;
  flex-flow: column;
  min-height: 100vh;
}
body {
  min-height: 100vh;
  margin:0;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background: linear-gradient(to bottom, #55707B, #677B82, #484926, #685125);
  background-size:100% 100%;
  color: white;
}
header img {
  min-height: 40px;
  margin: 1em auto 1em 1em;
}
header h1 {
  flex: 1;
  display: flex;
  flex-flow: column;
  justify-content: center;
  font-size: 3.5em;
  margin: 0;
}
header h1 b {
  display: block;
  color: #A7FE2B
}
main form {
  justify-content: space-around;
  align-items: center;
  padding: 5vh 3vw;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.25)
}
main form label {
  font-size: 5vh;
  width: 100%;
  position: relative;
}
main form label input:not([type="submit"]) {
  width: 100%;
  padding-left: 1.5em;
  box-sizing: border-box;
}
label:not(:last-of-type):before {
  font-family: FontAwesome;
  content: "\f007";
  position: absolute;
  z-index: 1;
  left: 0.2em;
  top: 0.25em;
  color: gray;
}
label:nth-child(2):before {
  content: "\f10b";
  /* etc ..*/
}
label:last-of-type input {
  padding: 0.25em;
  color: white;
  background: turquoise;
  border: none;
}
@media only screen and (max-height: 500px) {
  header h1 {
    font-size: 20px;
  }
  main form label {
    font-size: 20px;
  }
  body,
  main,
  header,
  form {
    height: auto;
    min-height: 100vh
  }
}

<link href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"/>
<header>
  <img src="http://dummyimage.com/150x40&text=\LOGO/" alt="logo" />
  <h1>HTML Ipsum  Vestibulum &<b> test me full page too</b></h1>
  <p>Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum,
    elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.</p>
</header>
<main>
  <form>
    <label>
      <input placeholder="place holder" />
    </label>
    <label>
      <input placeholder="place holder" />
    </label>
    <label>
      <input placeholder="place holder" />
    </label>
    <label>
      <input placeholder="place holder" />
    </label>
    <label>
      <input placeholder="place holder" />
    </label>
    <label>
      <input placeholder="place holder" />
    </label>
    <label>
      <input type="submit" value="tempus lacus" />
    </label>

  </form>
</main>

http://codepen.io/gc-nomade/pen/MbBNaO

HTML结构布局问题

3 个答案: