使用CSS的三列布局
[英]Three column layout using CSS
问题描述
I am trying to do a 3-column layout and was wondering why the blue (right) column wraps around. 
我正在尝试做一个3列布局，并想知道为什么蓝色（右）列环绕。 This works fine in IE but fails to work in Chrome (30.0.1599.101m) 这在IE中工作正常，但无法在Chrome中工作（30.0.1599.101m）
http://jsfiddle.net/V85JF/ http://jsfiddle.net/V85JF/
HTML HTML
<body>
<div class="top">
<div class="left">
</div>
<div class="center">
</div>
<div class="right">
</div>
</div>
</body>
CSS 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;
}
EDIT 编辑
I need the center element to have fluid height. 我需要中心元素有流体高度。 Top should take whatever height center takes. 顶部应采取任何身高中心。
3 个解决方案
解决方案1
2 已采纳 2013-11-08 05:51:47
Use float:left for .center and .right as well. 使用float:left表示.center和.right 。
For fluid height, keep min-height:200px of .center . 对于流体高度，保持min-height:200px的.center 。 Try this: 尝试这个：
.top{overflow:hidden;}
.left,.center,.right{float:left;}
.center{min-height:220px;}
解决方案2
1 2013-11-08 05:58:45
Html HTML
<body>
<div class="top">
<div class="left">
</div><div class="center">
</div><div class="right">
</div>
</div>
</body>
CSS 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;
}
解决方案3
0 2013-11-08 06:03:19
Try this 尝试这个
This Layout is Fluid 此布局是流动的
CSS 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;
}
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.