使用CSS的三列布局

Question

我正在尝试做一个3列布局，并想知道为什么蓝色（右）列环绕。 这在IE中工作正常，但无法在Chrome中工作（30.0.1599.101m）

HTML

<body>
<div class="top">
    <div class="left">
    </div>
    <div class="center">
    </div>
    <div class="right">
    </div>
</div>
</body>

CSS

body
{
    height:100%;
    margin:0;
    background:gray;
}
.top
{
    width:225px;
    height:200px;
    background:black;
}
.left
{
    width:75px;
    height:200px;
    background:Red;
    float:left;
    display:inline-block;
}
.center
{
    width:75px;
    height:200px;
    background:green;
    float:none;
    display:inline-block;
}
.right
{
    width:75px;
    height:200px;
    background:Blue;
    float:right;
    display:inline-block;
}

编辑

我需要中心元素有流体高度。 顶部应采取任何身高中心。

Answer 1

使用float:left表示.center和.right 。

对于流体高度，保持min-height:200px的.center 。 尝试这个：

.top{overflow:hidden;}
.left,.center,.right{float:left;}
.center{min-height:220px;}

在这里小提琴

Answer 2

jsFiddle演示

HTML

<body>
<div class="top">
    <div class="left">
    </div><div class="center">
    </div><div class="right">
    </div>
</div>
</body>

CSS

body
{
    height:100%;
    margin:0;
    padding:0;
    background:gray;
}
.top
{
    width:225px;
    height:auto;
    background:black;
}
.left
{
    width:75px;
    height:200px;
    background:Red;
    display:inline-block;
}
.center
{
    width:75px;
    height:570px;
    background:green;
    display:inline-block;
    clear:both;
}
.right
{
    width:75px;
    height:200px;
    background:Blue;
    display:inline-block;
}

Answer 3

尝试这个

此布局是流动的

小提琴演示

CSS

body
{
    height:100%;
    margin:0;
    background:gray;
}
.top
{
    width:100%;
    height:200px;
    background:black;
}
.left
{
    width:20%;
    height:200px;
    background:Red;
    float:left;
    display:inline-block;
}
.center
{
    width:60%;
    height:200px;
    background:green;
    float:left;
    display:inline-block;
}
.right
{
    width:20%
    height:200px;
    background:Blue;
    float:right;
    display:inline-block;
}

使用CSS的三列布局

问题描述

3 个解决方案

解决方案1
2 已采纳 2013-11-08 05:51:47

解决方案2
1 2013-11-08 05:58:45

解决方案3
0 2013-11-08 06:03:19

使用CSS的三列布局

问题描述

3 个解决方案

解决方案1 2 已采纳 2013-11-08 05:51:47

解决方案2 1 2013-11-08 05:58:45

解决方案3 0 2013-11-08 06:03:19

解决方案1
2 已采纳 2013-11-08 05:51:47

解决方案2
1 2013-11-08 05:58:45

解决方案3
0 2013-11-08 06:03:19