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的{{1}}。试试这个：

.center

Fiddle here.

Answer 2

jsFiddle demo

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

试试这个

此布局是流畅的

Fiddle DEMO

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 个答案: