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 に答える