개인이 같은 나는 배경에, 열 사이의 공간에 테이블을 만들고 싶어

Question

1 행과 2 열, 테이블 :

그리고 내 페이지의 텍스트해야하지 출구에서 크기를 조정할 때 실제로, 나는을 사용하여 제안 테이블을 사용하려면

#banner { 
 
    background-color: red; 
 
    margin-top: 70px; 
 
    background-size: cover; 
 
    height: 455px; 
 
    margin-left: 35px; 
 
    margin-right: 35px; 
 
    overflow: hidden; 
 
} 
 
.r1c1 { 
 
    float: left; 
 
    overflow: hidden; 
 
    width: 90%; 
 
} 
 
.r2c1 { 
 
    float: left; 
 
    overflow: hidden; 
 
}

<div id="banner"> 
 
    <div class="r1c1"> 
 

 
    <h2>Once you've experienced the pleasure and comfort of hydronic heating, there's no going back.</h2> 
 
    </div> 
 
    <div class="r2c1"> 
 
    <img class="voucher1" src="voucher1.png"> 
 
    </div> 
 
</div>

Answer 1

박스요소를 직접 작성하십시오. 당신이 첨부 된 이미지의 표시 같은 것을 만드는 것 대신에, 내가 몇 가지 제안이 있습니다

1. 테이블 세포는
2. 이 텍스트 주위에 컨테이너 사업부를 배치하고 제어를 시도 분리 유지하기 위해 여백을 사용해보십시오 크기는 셀에 공간이있는 모양을 만듭니다.

3. 트위터 부트 스트랩을 사용해보세요. 오픈 소스이고 환상적이며 사용하기가 쉽습니다. 그것은 다양한 요소에 대한 사전 설정을 가지고 있습니다. 당신처럼 간단 할 것 원하는 것을 만들기 :

   <div class="col-lg-5 col-md-5" id="r1c1"><div> 
   <div class="col-lg-2 col-md-2" id="spacer"><div> 
   <div class="col-lg-5 col-md-5" id="r2c1"><div> 
   

더 COL-LG 전자와 COL-MD 클래스를 정의 할 필요없이, 당신은 부트 스트랩 그리드 시스템의 장점을 촬영하고 확장 가능한 테이블을 만들었습니다. 희망이 도움이됩니다!