html - 如何将 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 都应采用与较大 div 相同的尺寸。

我试过:

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

并设置 li

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

但没有任何改变。如果第一个 DIV 的内容导致 div 调整大小，则另一个 DIV 将不会采用新的 100% 高度。我该如何解决这个问题？

Answer 1

在 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; }

请注意，与一组内联 block 元素不同，表格行不会自动换行到多行，因此如果这是您的目标，您无法使用 CSS 实现，必须添加一些 JavaScript，例如调整高度.