如何讓我的右盒漂浮...？

Question

我試圖使這個居中的包裝與視口流暢地工作，但即時通訊存在與放置右分區的問題。下面是HTML的外觀：

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

這裏是（flawed-）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地方本身中等DIV下方，而不是到對。似乎無法找到這個邏輯！...我已經嘗試過與位置：相對，數字寬度，右側div在中間等...但沒有使它跳到位。該怎麼辦 ？ Thx/Nic

Answer 1

您可以交換html元素的順序。在左邊div之前有正確的div。

雖然還有其他幾種方法可以製作3列布局，但使用position：absolute作爲示例。谷歌周圍的「3列布局」，你應該找到一些很好的例子。

Answer 2

您應該將#middle div浮動到左側，並根據需要向#left應用一些邊距。這應該解決問題:)。