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 모두 몇 가지 사소한 조작을했습니다 - here jsfiddle을 참조하십시오.

나는 절대 위치를 제거했습니다 : .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