我正在尝试制作以首页为中心的四列。我希望它看起来像这个例子:
http://www.clutterpad.com/
我的代码是这样的:
#bottom-container {width:100%;height:250px;position:relative;}
#bottom-mid {background-color:white;}
#bottom-left, #bottom-mid, #bottom-right {height:250px;}
#bottom-left, #bottom-right {width:50%;float:left;}
#bottom-left {background-color:white;position:absolute;top:0px;left:0px;}
#bottom-right {background-color:white;position:absolute;top:0px;left:50%;}
#bottom-mid {position:relative;margin:0px auto; width:1000px;z-index:2;}
#column-container {width:100%; margin:20px auto;}
.column {width:200px;float:left;font-size:10pt;font-family:Arial;margin:20px 10px;}
但是没有成功。我应该如何编码使其看起来像我之前提到的示例?
最佳答案
如果你能包含 HTML 就好了,但我会这样处理这个问题:
<div id="fourcolumns">
<div>Column</div>
<div>Column</div>
<div>Column</div>
<div>Column</div>
</div>
CSS:
#fourcolumns {
width: 100%;
overflow: hidden;
}
#fourcolumns div {
width: 25%;
float: left;
}
如果您在列之间添加边距,您将成为 IE6 双边距 float 错误的受害者,您可以通过包含 #fourcolumns div { display: inline; 来修复该错误。 }
关于在 CSS 中居中四列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/2826147/