Та же высота li и авторегулировка контейнера div's height

Question

Я хочу иметь горизонтально выровненные элементы li с одинаковой высотой с минимальной высотой. Я хочу, чтобы размер контейнера div увеличивался с некоторой минимальной высоты с увеличением высоты элементов li. Вот jsfiddle того, что я пробовал: http://jsfiddle.net/6NKn2/a

HTML:

<div id='d'> 
<ul id='u'> 
    <li class='l'>item 1 long item long item long long long long long long</li> 
    <li class='l'>item 2</li> 
    <li class='l'>item 3</li> 
</ul> 

CSS:

#d { 
    min-height: 100px; 
    border: 1px solid black; 
} 
#u { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    border: 1px solid green; 
    height: 100%; 
} 
.l { 
    float: left; 
    border: 1px solid black; 
    width: 50px; 
    height: 100%; 
} 

Я не могу понять, как достичь этого. Также я хотел бы избежать новых свойств CSS3 для поддержки старого IE (7+). Использование JavaScript также прекрасное. Не могли бы вы мне помочь? Спасибо.

Answer 1

, если вы хотите иметь все <li> элементы одинакового роста используют thi S JQuery код:

var $height = 0 ; 
$("li.l").each(function(){ 
    if(($(this).height())>$height){ 
      $height = $(this).height(); 
    } 
}); 
$("li.l").each(function(){ 
    $(this).css("height",$height) 
}); 

для увеличения высоты контейнера вам необходимо установить overflow:auto:

#d 
{ 
    min-height: 100px; 
    border: 1px solid black; 
    overflow:auto; /* added */ 
} 

here is jsFiddle

Answer 2

Cross-Browser Минимальная высота

CSS-мин-высота является одним из наиболее востребованных CSS фрагментах, чтобы решить раздражающие проблемы мин-высота в IE.

Пример И.Е.

#d { 
     min-height: 500px; 
     height:auto !important; 
     height: 500px; 
     overflow:auto; 
    } 

Answer 3

Добавить overflow:auto;

Например,

#d { 
    border: 1px solid #000000; 
    min-height: 100px; 
    overflow: auto; 
} 

WORKING DEMO

Answer 4

#d 
{ 
    min-height: 100px; 
    border: 1px solid black; 
    min-height: 500px; 
    height:auto !important; 
    height: 500px; 
} 

Answer 5

Как насчет добавления overflow: auto в #d?

Answer 6

#d 
{ 
    min-height: 100px; 
    border: 1px solid black; 
    float:left; 
} 

использовать этот код для ид #d

Answer 7

Удалить мин-высота в #d и поместить свойство CSS

float:left 

Fiddle DEMO :

Answer 8

вы можете сделать это путем применения высоты ул всем литий by jQuery

при загрузке страницы сначала получите е высота ул которая равна высоте литий, который имеет самую большую высоту и применять такую ​​же высоту внутренней литий

Here is the demo for it

Answer 9

Сначала вам нужно упомянутый мин-высота для контейнера #d

#d { 
    min-height: 500px; 
    height:auto !important; 
    height: 500px; 
    overflow:auto; 
} 

Aditionally вам нужно добавить clearfix из левого плавающих элементов списка, чтобы расширить окружающую контейнер, когда список grwos в высоту:

<div id='d'> 
    <ul id='u'> 
    <li class='l'>item 1 long item long item long long long long long long</li> 
    <li class='l'>item 2</li> 
    <li class='l'>item 3</li> 
    </ul> 
    <div class="clearleft"></div> 
</div> 


.clearleft { 
    clear: left; 
} 

Здесь JSFiddle