成長中的盒子不工作

我喜歡左邊的盒子隨着內容向右擴展整個包裝......我的意思是垂直縮放....不是水平的！成長中的盒子不工作

reference page

我敢肯定，這是唯一的CSS禮某處的事......你能幫忙嗎？

來源

2010-11-29 menardmam

，我想不出你在問什麼。什麼盒子需要增長？ – Greg 2010-11-29 20:32:47

儘量避免浮動，浮動圖像和文字。人們通常使用絕對定位更合適的浮標。

基本上你要做的是在右窗格中添加一個與左窗格一樣寬的邊距。然後將您的左窗格絕對定位在右窗格的頂部，並將高度設置爲100％，以使其與容器一樣高。容器將具有與內容相同的高度。

這裏有一個樣品您：通過查看頁面

<!DOCTYPE HTML> 
<html> 
    <head> 
    <style type="text/css"> 
     body { width: 800px; margin: 0px auto; position: relative; } 

     #nav { 
     width: 200px; height: 100%; 
     position: absolute; left: 0px; top 0px; 
     background: #F00; 
     } 

     #content { 
     margin: 0px 0px 0px 200px; 
     heigth: 1000px; 
     background: #0F0; 
     } 
    </style> 
    </head> 
    <body> 
    <div id="nav"> 
    </div> 
    <div id="content"> 
    </div> 
    </body> 
</html>

來源

2010-11-29 22:06:56 Jan

你可能尋找一個「流體列布局」（即谷歌），你可以通過設置您的標記是這樣的最簡單的實現這一點：

<ul style="float:left; width:35%;"> 
    <li><a href="">Link 1</a></li> 
    <li><a href="">Link 2</a></li> 
    <li><a href="">Link 3</a></li> 
</ul> 
<div style="float:left; width:65%;"> 
    <p>Lots of content goes here</p> 
</div>

由於整個頁面的寬度（像通過調整瀏覽器的大小）兩個'列'拉伸以滿足其35％和65％的寬度要求。以上是一個快速示例標記，它沒有考慮Internet Explorers，元素上的默認填充/邊距或浮動間距，理想情況下，兩列中的任何樣式都將通過'class'設置，即： <div class="column-a">，以及在外部CSS文件中定義的所有類。

讓我知道你是否想讓我詳細說明。

編輯：好的，所以你想要左欄的背景顏色延伸到底部，給出'等高欄'的視覺效果？如果是這種情況this link is great，並應涵蓋您需要知道和嘗試的一切。

來源

2010-11-29 20:38:23 danjah

我的意思是垂直縮放....不是水平的！ – menardmam 2010-11-29 21:09:40

成長中的盒子不工作

回答

相關問題