1

我正在尝试进行 3 列布局，并且想知道为什么蓝色（右）列会环绕。这在 IE 中运行良好，但在 Chrome 中无法运行（30.0.1599.101m）

http://jsfiddle.net/V85JF/

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

编辑

我需要中心元素具有流体高度。顶部应该采用中心采用的任何高度。

4

3 回答 3

2

用于float:left和.center也.right。

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

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

在这里拉小提琴。

于 2013-11-08T05:51:47.170 回答
1

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;
}
于 2013-11-08T05:58:45.617 回答
0

尝试这个

这个布局很流畅

小提琴演示

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;
}
于 2013-11-08T06:03:19.053 回答