使用CSS的三列布局
[英]Three column layout using CSS
問題描述
我正在嘗試做一個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;
}
編輯
我需要中心元素有流體高度。 頂部應采取任何身高中心。
3 個解決方案
解決方案1
2 已采納 2013-11-08 05:51:47
使用float:left表示.center和.right 。
對於流體高度，保持min-height:200px的.center 。 嘗試這個：
.top{overflow:hidden;}
.left,.center,.right{float:left;}
.center{min-height:220px;}
解決方案2
1 2013-11-08 05:58:45
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;
}
解決方案3
0 2013-11-08 06:03:19
嘗試這個
此布局是流動的
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創建兩個等高的布局列，並在右列內插入三個等高的堆疊列
[英]Using CSS to create two equal height layout columns, and inserting three equal height stacked columns inside the right column
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.