如何製作右列在容器外的兩列布局？

我想做一個簡單的兩列布局，其中右列不在容器中，但仍然使得容器高度擴大。通過使用位置：絕對，它應該是但應該擴大。如何製作右列在容器外的兩列布局？

這是HTML代碼

//注：我不添加head標籤保存在這裏的空間:)

<html> 
<body> 

<div id="container"> 

      <div id="left"> 


      </div> 
          <div id="right"> 


          </div> 

</div> 

</body> 
</html>

而且CSS代碼

#container { 
      width:900px; 
      margin:0 auto; 
} 

#left { 
     width:700px; 
     float:left;} 

#right{ 
     width:230px; 
     margin-left:760px; 
     position:absolute; 
}

我不能使用float：right，因爲它會浮動到容器的右側。也許結構必須有所不同，我不知道。

來源

2012-03-16 Ben

你在#container的餘量一個錯字：o自動;更改爲保證金：0 auto; – 2012-03-16 01:18:49

嘗試設置position: relative上#right，並給它一個margin-left大於容器的寬度：http://jsfiddle.net/8MEqL/

來源

2012-03-16 01:16:28 Aaron

感謝@Aaron的工作。 – Ben 2012-03-16 01:21:08

如何製作右列在容器外的兩列布局？

回答

相關問題