如何使我的右框浮动正确...?

时间:2010-02-18 11:02:31

标签: css

我正在尝试使这个居中的包装器与视口流畅地工作,但我在放置右div时遇到问题。以下是html的外观:

<div id="wrapper">
<div id="left">Left</div>
<div id="middle">Middle</div>
<div id="right">Right</div>
</div>

这是(有缺陷的)CSS:

#wrapper{
 top: 0px;
 width:80%;
 margin: 0 auto;}

#left {
 top: 0px;
 margin: 0px;
 padding: 10px;
 background: #555;
 width:10%;
 height:400px;
 float:left;}

#middle { 
 padding: 10px;
 background: #666;
 height:400px;
 width:75%;
 clear:none;}

#right {
 top: 0px;
 margin: 0px;
 padding: 10px;
 background: #777;
 width:10%;
 height:400px;
 float:right;}

右边的div将自己放在middle-div之下而不是右边。似乎无法找到这里的逻辑!...我尝试了位置:相对,编号宽度,右边div在中间等...但没有任何东西使它跳到位。该怎么办 ? Thx / Nic

2 个答案:

答案 0 :(得分:1)

您应该将#middle div浮动到左侧,并根据需要对#left应用一些余量。这应该可以解决问题:)。

答案 1 :(得分:0)

您可以交换html元素的顺序。在左div之前有正确的div。

有几种其他方法可以使用position:absolute作为3列布局。谷歌围绕“3栏布局”你应该找到一些很好的例子。