Question

我正在尝试使这个居中的包装器与视口流畅地工作，但我在放置右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

Answer 1

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

Answer 2

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

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

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

2 个答案: