用兩個內部div創建一個div。背景/內容必須「遵循」

我怎樣才能讓這樣的：用兩個內部div創建一個div。背景/內容必須「遵循」

[DIV-1]

[DIV -2] 側面菜單INSIDE 2 [/ DIV - 2]

[DIV -3] 主要內容INSIDE 3 [/ DIV -3]

[/ DIV-1]

所以，讓我們說，DIV 3具有雷爾y long content - 遠遠超過DIV 2.

如何才能使DIV 2的背景和邊框等跟隨DIV 3的高度？

現在我已經嘗試了980.css網格，雖然它沒有工作。

這是我現在有：

 <div class="column grid_12"> 

       <div class="column grid_3" style="background-color:gray;"> 
       MENU! 
       </div> 
       <div class="column grid_8" style="background-color:black;"> 
       CONTENT! <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> 

      </div> 

     </div> 




</div><!-- End Row -->

最親切的問候

來源

2011-11-29 oliverbj

告訴我們你做了什麼 –

我已經更新了我的問題。 – oliverbj

也許你可以使用JavaScript和DIV2的高度設置爲DIV3的高度。

像：

$(document).ready(function(){ 
    var MyHeight = $('.grid_3').height(); 
    $('.grid_8').height(MyHeight); 
});

來源

2011-11-29 16:53:17 Laszlo

如果第二列總是會比第一個長，你可以使用類似下面的例子：

<html> 
<head> 

    <style> 
     .container {overflow:hidden; position:relative;} 
     .col1 {position:absolute; width:200px; height:100%; top:0px; left:0px; background:#ffbebe;} 
     .col2 {width:400px; margin:0px 0px 0px 200px; background:#ffff00;} 
    </style> 

</head> 

<body> 

    <div class="container"> 

     <div class="col1" > 
      MENU!<br /> 
     </div> 

     <div class="col2" > 
      CONTENT!<br /> 
      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
     </div> 

    </div> 

</body> 
</html>

來源

2011-11-29 19:28:50 jim31415

你最好最簡單的 - 和 - 的辦法是使用faux columns。

來源

2011-11-29 19:35:52

個人而言，我喜歡從www.ejeliot.com

我上的jsfiddle以身作則了等高列 - http://jsfiddle.net/spacebeers/s8uLG/1/

你設置你的容器了溢出設置爲隱藏，然後在每個div加負底邊和相等的正底邊。

#container { overflow: hidden; } 
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; } 
#container .col2 { background: #eee; } 

<div id="container"> 
    <div> 
     <p>Content 1</p> 
    </div> 
    <div class="col2"> 
     <p>Content 2</p> 
     <p>Content 2</p> 
     <p>Content 2</p> 
     <p>Content 2</p> 
    </div> 
    <div> 
     <p>Content 3</p> 
     <p>Content 3</p> 
     <p>Content 3</p> 
     <p>Content 3</p> 
     <p>Content 3</p> 
     <p>Content 3</p> 
     <p>Content 3</p> 
     <p>Content 3</p> 
     <p>Content 3</p> 
    </div> 
</div>

仿柱也很好，可能更容易設置，但如果你真的死於使用圖像，這是一個很好的方法。

來源

2011-12-02 20:24:48 SpaceBeers

用兩個內部div創建一個div。背景/內容必須 「遵循」

回答

相關問題

用兩個內部div創建一個div。背景/內容必須「遵循」