2010-03-25 3 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.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

Это не очень, но быстрое решение. Я предлагаю вам придерживаться ответов греймеров. Особенно магия святого Грааля Мэтью Джеймса Тейлора (вот что я использую в качестве базы в сочетании с YAML для новых тем Drupal). – Paul

+0

Я получил его, работая с помощью jquery, но хотел узнать, возможно ли это с помощью базового CSS – manraj82

+0

спасибо большое m8, это сработало .... – manraj82

Смежные вопросы