我正在尝试使这个居中的包装器与视口流畅地工作,但我在放置右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
答案 0 :(得分:1)
您应该将#middle div浮动到左侧,并根据需要对#left应用一些余量。这应该可以解决问题:)。
答案 1 :(得分:0)
您可以交换html元素的顺序。在左div之前有正确的div。
有几种其他方法可以使用position:absolute作为3列布局。谷歌围绕“3栏布局”你应该找到一些很好的例子。