2017-01-01 2 views
0

컨테이너의 한면에는 서식을, 다른면에는 텍스트 단락을 어떻게 넣을 수 있습니까? 나는 한 열의 두 개의 열이있는 컨테이너에 모든 것을 넣으면 작동 할 것이라고 생각했지만 어떤 이유로 왼쪽의 양식 아래에 단락 텍스트가 나타납니다.한 열의 양식과 다른 열의 텍스트 단락

이것은 현재 가지고있는 코드를 기반으로 일어나는 일의 스크린 샷입니다. 이 바보 같은 질문처럼 보인다 경우 그냥 코드를 배우기 시작

Img

<div class="container-section getintouch"> 
    <h1 class="text-center">Say hello?</h1> 
    <div class="row"> 
     <div class="col-xs-6"> 

     <form> 
      <div class="form-group"> 
       <input type="text" class="form-control no-border  
       placeholder="Email"> 
      </div> 
      <div class="form-group"> 
       <input type="text" class="form-control no-border"  
       placeholder="Email"> 
      </div> 
    <textarea class="form-control no-border" rows="5" id="comment"></textarea> 
      </div> 
      </form> 

     </div> 
     <div class="col-xs-6"> 
     <h3>Want to say hello? It's always nice meeting new people. Fill out 
      this form to the left and I'll reply to you as soon as I can :)  
     </h3> 
     </div> 
    </div>enter code here 

.container-section{ 
    width: full; 
    height: full; 
    margin: 0 auto; 
    padding: 100px; 
    color: white; 
} 

.getintouch{ 
    background: #9dd1f1; 
} 

은 그래서 죄송합니다. 나는 주변을 수색 해 어디서나 대답을 찾을 수 없었다.

미리 감사드립니다.

+0

게시했을 때 질문이 어떻게 표시되는지 보셨나요? –

+1

죄송합니다, 나는 그것을 보지 못했습니다! 나는 그것을 고쳤다 고 생각한다. –

답변

1

질문하기 전에 HTML과 CSS를 올바르게 배우십시오.

  1. 값이 full 인 CSS 규칙이 없습니다.
  2. paddingwidth에 입력하지 마십시오.
  3. container 클래스를 추가하는 것을 잊었습니다.
  4. 유효하지 않은 HTML이 많이 있습니다.

발췌문

.container-section { 
 
    -margin: 0 auto; 
 
    -color: white; 
 
} 
 
.getintouch { 
 
    background: #9dd1f1; 
 
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" /> 
 
<div class="container-section getintouch"> 
 
    <h1 class="text-center">Say hello?</h1> 
 
    <div class="container"> 
 
    <div class="row"> 
 
     <div class="col-xs-6"> 
 
     <form> 
 
      <div class="form-group"> 
 
      <input type="text" class="form-control no-border" id=formGroupExampleInput " placeholder="Name ""> 
 
      </div> 
 
      <div class="form-group"> 
 
      <input type="text" class="form-control no-border" id=formGroupExampleInput2 " placeholder="Email ""> 
 
      </div> 
 
      <div class="form-group"> 
 
      <textarea class="form-control no-border" rows="5" id="comment"></textarea> 
 
      </div> 
 
     </form> 
 
     </div> 
 
     <div class="col-xs-6"> 
 
     <h3>Want to say hello? It's always nice meeting new people. Fill out this form to the left and I'll reply to you as soon as I can :)</h3> 
 
     </div> 
 
    </div> 
 
    </div>

미리보기

preview

출력 : http://jsbin.com/mepiripeju/edit?html,css,output

관련 문제