Question

如何使用div + css在html中创建三列。

左右列宽：自动，中间一个需要宽度：990px（应该在中间），它们是高度：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

对于此类功能，您可以使用display：table属性。像这样：

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

选中此http://jsfiddle.net/K5H4e/

但是直到IE7＆amp;下方。

Answer 2

使用带有三列的table会更容易。

Answer 3

一般情况下你应该使用这样的东西：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>

注意：您不会轻易地将行的高度对齐，因为它们是独立的元素。

编辑：为了使height:100%适用于您的div，您需要以下内容：

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

div {
min-height: 100%;
}

EDIT2：updated fiddle

Answer 4

<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 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>

如何使用div + css在html中创建三列

5 个答案: