Как исправить высоту LI быть высоким, как и другие LI

Question

Я неупорядоченный список, как это:

<ul style="float:left;"> 
    <li class="book"> 
    <div>title sdfdfdsfdsfds sdfsdfsdf dsfsdfsdf fdgsdfsdf</div> 
    </li> 
    <li class="book"> 
    <div>title</div> 
    </li> 
</ul> 

Высота Li должна зависеть частично от содержания Li (высота дел). Но если высота внутреннего DIV становится выше, чем другой div внутри другого li, все div должны принимать одинаковые размеры большего div.

I судимого с:

div { height: auto; min-height: 100%; } 

и установкой литиево

float: left;display: inline-block; height: 100px; 

, но ничего не изменилось. Если содержимое первого DIV приводит к изменению размера div, другой DIV не будет принимать новую 100-процентную высоту. Как я могу это решить?

Answer 1

Попробуйте следующее (поместить элементы Li внутри элемента DIV),:

<ul style="float:left;"> 
    <li class="book" > 
     <div style="display: inline-block; height: 100px;"> 
     title sdfdfdsfdsfds sdfsdfsdf dsfsdfsdf fdgsdfsdf 
     </div> 
    </li>  
    <li class="book" > 
     <div style="display: inline-block; height: 100px;"> 
     title 
     </div> 
    </li> 
</ul> 

ОТКАЗ: встроенные стили там для удобства :)

Answer 2

В CSS, чтобы автоматически настроить вещи, к тому же по их содержанию, они должны быть частью таблицы . Попробуйте это:

<ul class="booklist"> 
    <li class="book"> 
    <div>title <br>sdfdfdsfdsfds <br>sdfsdfsdf dsfsdfsdf fdgsdfsdf</div> 
    </li> 
    <li class="book"> 
    <div>title</div> 
    </li> 
</ul> 

.booklist { display: table; float: left; } 
.book { display: table-cell; border: 1px solid gray; } 

Обратите внимание, что в отличие от множества инлайн-блочных элементов, строки таблицы не автоматический перенос на несколько строк, так что если это ваша цель, вы не можете сделать это с помощью CSS и должен добавить JavaScript, например, для регулировки высоты.

Answer 3

Может быть, я не понимая вас, но это:

всего DIV должно взять на себя ту же размерность больших дел.

все равно произойдет.

Если вы пытаетесь сохранить некоторую согласованность между элементами Li попробовать что-то вроде этого:

li {float: left; width: 100px; border: 1px solid red; overflow: hidden; }