HTML 结构布局问题

Question

我的 html 和 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; 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; }

<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>

Answer 1

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

我已经从 .form-wrapper 中删除了 position: absolute，将表单包装在 .col-xs-6 中，并放入相同的 .row 以便它位于注册内容旁边。

每个 .row 可以包含 .col-xx-xx 或 .col-xx-offset-xx 的任意组合，只要因为数字的总和不超过 12。您可以阅读更多关于此的信息 here .

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;
}