具有兩列居中固定寬度容器的CSS佈局;一列固定寬度，延伸到

頁

這裏結束第二列是截圖：具有兩列居中固定寬度容器的CSS佈局;一列固定寬度，延伸到

The 960 container is transparent, it is colored just for visual purposes

我唯一的挑戰是它是否有可能溢出左列從容器中。這可能嗎？容器不會有bg，它只是出於視覺目的。

#container { width: 960px; margin: 0 auto } 
#left-column { ??? } 
#right-column { width: 200px; float: right }

有關詳細信息，以什麼我想實現的，這裏的另一個截圖：

enter image description here

960容器由在兩側的水鴨統治者標記。這些航班的頂部和底部有一個邊界，一直延伸到左邊，並擴展到960集裝箱外。

來源

2013-11-27 rclai

爲什麼你想從列表中取出列？爲什麼不把它放在HTML容器之外？你能告訴我們你想達到什麼嗎？ :) – nkmol

我更新了我試圖實現的另一個屏幕截圖的問題。 – rclai

像這樣的事情會做到這一點：

<div id="container"> 
    <div id="right-column"></div> 
    <div id="left-column"></div>  
</div>

CSS：

#container { width: 100%; margin: 0 auto; display:inline-table } 
#left-column { height:500px; background:#00ff00;width:auto} 
#right-column { width: 150px; float: right;height:500px; background:#00ffff }

這裏檢查它：

http://jsfiddle.net/h9XuQ/

來源

2013-11-27 18:08:06

您可以移除額外的款式 –

#container不能爲100％; – rclai

刪除display：inline-table屬性，並將其設置爲所需的widht –

如果你堅持認爲把剩下的div容器內，這是不可能的，沒有JavaScript的幫助。

如果你想要的是剛拿起頁面的其餘部分，不介意在那裏它被放置，你可以嘗試以下方法：

#theLeftColumn { 
    position：fixed; /*or absolute if it is a direct child of body*/ 
    margin-top:0px; /*set to other value if you need to leave space for header menu */ 
    left: 0px; 
    /*280px = (width of container)/2 - (width of right fixed width column) 
      = 960px/2-200px */ 
    width: -moz-calc(50% + 280px); 
    width: -webkit-calc(50% + 280px); 
    width: calc(50% + 280px); 
    /*if it is div, the default of display is block, else it is needed to be set */ 
    display:block; 
}

注意，CSS3是需要計算的函數。

來源

2013-11-27 18:13:14 cytsunny

哦，男孩，我怕JS可能需要呃？ – rclai

是的，如果你堅持把它放在容器內。 – cytsunny

你需要的是一個包裝元素。內容顯然被放置在一個大小必須大於960像素的包裝元素中。我想這是所有關於下面的代碼，

<div id="wrapper"> 
<div id="960container"> 
    <div id="left-column"></div> 
    <div id="right-column"></div> 
</div> 
</div>

這是你想要問什麼？不確定您是否想知道原點或造型問題。

來源

2013-11-27 18:17:00

960容器外面的東西並不重要。你可以假裝在960容器外只是。 – rclai

具有兩列居中固定寬度容器的CSS佈局;一列固定寬度，延伸到

回答

相關問題