div + css를 사용하여 HTML 3 열로 작성

Question

div + css를 사용하여 html로 3 열을 만드는 방법.

왼쪽 및 오른쪽 열 너비 : 자동 및 중간 필요 너비 : 990 픽셀 (중앙에 있어야 함) 높이 : 100 %

HTML은

<div style=" float:left; width:auto; height: 100%;background-color:#006;">Area1</div> 
<div style=" float:left; width:990px; height: 100%;">Area2</div> 
<div style=" float:left; width:auto; height: 100%;background-color:#006633;">Area3</div> 

Answer 1

이것은 table 열 세와를 사용하여 쉽게 될 것입니다.

Answer 2

일반 당신은 다음과 같은 것을 사용합니다 : Example on js-fiddle.

<div style="float:left; background-color:#006;" >Area1</div> 
<div style="float:right; background-color:#006633;">Area3</div> 
<div style="border:1px solid red;overflow:auto;" >Area2</div> 
​ 

참고 : 행의 높이가 독립적 요소이므로 쉽게 정렬 할 수 없습니다.

편집 : 귀하의 div의에 height:100% 작업을하기 위해 , 다음이 필요합니다

html, body { 
margin: 0; 
padding: 0; 
height: 100%; /* important! */ 
} 

div { 
min-height: 100%; 
} 

EDIT2 : 당신이 디스플레이를 사용하여 이러한 유형의 기능에 대한 updated fiddle

Answer 3

<div class="Division"><p>First Division</p></div> 
<div class="Division"><p>Second Division</p></div> 
<div class="Division"><p>Third Division</p></div>​ 


.Division{ 
float: left; 
width: 100px; 
height: 200px; 
border: 2px solid #000000; 
margin-left: 10px; 
} 

Answer 4

: 이것에 대한 테이블 속성. 이처럼 :

html,body{height:100%;} 
div{ 
    display:table-cell; 
    height:100%; 
    vertical-align:top; 
} 

확인이 http://jsfiddle.net/K5H4e/

는하지만 아래 IE7 &까지 작동하지 않을 수 있습니다. 이것에 대해

Answer 5

방법 : jsfiddle

<div style="width:auto; height: 100%;background-color:#006; 
display: inline">Area</div> 
<div style="width:990px; height: 100%; display: inline">Area2</div> 
<div style="width:auto; height: 100%;background-color:#006633; 
display:inline">Area3</div>