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から削除し、フォームを.col-xs-6にラップし、同じ.rowに入れて、登録内容の横に置いてください。

各.rowは数字の合計が、あなたがこのhereについての詳細を読むことができませんこれ以上12以下である限り、.col-xx-xxまたは.col-xx-offset-xxの任意の組み合わせを含めることができます。

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

あなたは、ブートストラップ（クラスや構造）を使用し、フォントサイズのサイズ変更を可能にするため、いくつかのmediaqueriesとフレックスモデルに中継し、最終的に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