2010-03-25 70 views
0

我有一個div [projItemsContent]根據內容高度不同,我得到的問題是,有兩個其他divs [projItemsLeft,projItemsRigh],我想擁有相同的高度作爲projItemsContent div。有什麼建議嗎?問題與變化的CSS高度

div.projItems{width:360px;min-height:200px;_height:200px;background:#000} 

div.projItemsLeft{float:left;width:30px;background:#990} 
div.projItemsRight{float:left;width:30px;background:#900} 
div.projItemsContent{float:left;width:300px;background:#ccc} 


<div class="projItems"> 


    <div class="projItemsLeft">&nbsp;</div> 

    <div class="projItemsContent"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet nunc eu ligula tincidunt faucibus. 
     Curabitur eget magna neque, sed porta sem. Fusce eu lorem at orci dapibus faucibus ut eu mi. In eget ligula risus. 
     Sed id lectus lorem. Integer elit dui, bibendum vitae dictum a, mollis sodales diam. Morbi vehicula lobortis semper. 
     Suspendisse potenti. Proin eu convallis lectus. Praesent ut sem at enim condimentum dictum vitae id elit. 
     Phasellus id dolor ante, hendrerit tempus lorem. Proin nisi nibh, convallis et sollicitudin in, interdum vitae nibh. 
     Fusce ullamcorper dictum nunc, eget bibendum ipsum viverra quis. Aliquam vitae leo non metus ultricies tempus in id libero. 
     Vivamus mauris tortor, convallis ut luctus at, elementum sed velit. Cras cursus tempus erat adipiscing lacinia. 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam risus, sollicitudin sed venenatis a, molestie in turpis. 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet nunc eu ligula tincidunt faucibus. 
     Curabitur eget magna neque, sed porta sem. Fusce eu lorem at orci dapibus faucibus ut eu mi. In eget ligula risus. 
     Sed id lectus lorem. Integer elit dui, bibendum vitae dictum a, mollis sodales diam. Morbi vehicula lobortis semper. 
     Suspendisse potenti. Proin eu convallis lectus. Praesent ut sem at enim condimentum dictum vitae id elit. 
     Phasellus id dolor ante, hendrerit tempus lorem. Proin nisi nibh, convallis et sollicitudin in, interdum vitae nibh. 
     Fusce ullamcorper dictum nunc, eget bibendum ipsum viverra quis. Aliquam vitae leo non metus ultricies tempus in id libero. 
     Vivamus mauris tortor, convallis ut luctus at, elementum sed velit. Cras cursus tempus erat adipiscing lacinia. 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam risus, sollicitudin sed venenatis a, molestie in turpis. 


    </div>  

    <div class="projItemsRight">&nbsp;</div> 

</div> 

回答

1

封裝的div:

div.projItems{width:360px;min-height:200px;_height:200px;background:#000} 

div.projItemsLeft{float:left;width:360px;background:#990} 
div.projItemsRight{float:right;width:330px;background:#900} 
div.projItemsContent{float:left;width:300px;background:#ccc} 


<div class="projItems"> 


    <div class="projItemsLeft"> 
    <div class="projItemsRight"> 

    <div class="projItemsContent"> 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet nunc eu ligula tincidunt faucibus. 
     Curabitur eget magna neque, sed porta sem. Fusce eu lorem at orci dapibus faucibus ut eu mi. In eget ligula risus. 
     Sed id lectus lorem. Integer elit dui, bibendum vitae dictum a, mollis sodales diam. Morbi vehicula lobortis semper. 
     Suspendisse potenti. Proin eu convallis lectus. Praesent ut sem at enim condimentum dictum vitae id elit. 
     Phasellus id dolor ante, hendrerit tempus lorem. Proin nisi nibh, convallis et sollicitudin in, interdum vitae nibh. 
     Fusce ullamcorper dictum nunc, eget bibendum ipsum viverra quis. Aliquam vitae leo non metus ultricies tempus in id libero. 
     Vivamus mauris tortor, convallis ut luctus at, elementum sed velit. Cras cursus tempus erat adipiscing lacinia. 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam risus, sollicitudin sed venenatis a, molestie in turpis. 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet nunc eu ligula tincidunt faucibus. 
     Curabitur eget magna neque, sed porta sem. Fusce eu lorem at orci dapibus faucibus ut eu mi. In eget ligula risus. 
     Sed id lectus lorem. Integer elit dui, bibendum vitae dictum a, mollis sodales diam. Morbi vehicula lobortis semper. 
     Suspendisse potenti. Proin eu convallis lectus. Praesent ut sem at enim condimentum dictum vitae id elit. 
     Phasellus id dolor ante, hendrerit tempus lorem. Proin nisi nibh, convallis et sollicitudin in, interdum vitae nibh. 
     Fusce ullamcorper dictum nunc, eget bibendum ipsum viverra quis. Aliquam vitae leo non metus ultricies tempus in id libero. 
     Vivamus mauris tortor, convallis ut luctus at, elementum sed velit. Cras cursus tempus erat adipiscing lacinia. 
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam risus, sollicitudin sed venenatis a, molestie in turpis. 


    </div> 

    Right column content  

    <br style="clear:left;" /></div> 

    Left column content 

    <br style="clear:right;" /></div> 

</div> 
+0

這不是很好,但一個快速解決方案。我建議你堅持格哈姆斯的答案。特別是Matthew James Taylor的聖盃佈局(這是我與YAML一起用於新Drupal主題的基礎)。 – Paul 2010-03-25 12:08:25

+0

我得到它使用jQuery的工作,但想知道是否有可能使用基本的CSS – manraj82 2010-03-25 12:11:31

+0

非常感謝m8,它的工作.... – manraj82 2010-03-25 12:45:47