javascript - 使一行中列表项的高度跟随它们的最大高度

Question

在这个页面中: http://pastehtml.com/view/1biylhs.html

你可以看到中间的书比同一行的其他两本书需要更多的高度空间，因为它的标题有更多的文字。

目前，每本书都包含在一个 <li> 中高度为 175px。

我可以将它们的高度设置为自动，但它仍然不能使同一行中的所有列表项都遵循其中最大的高度:

http://pastehtml.com/view/1bj19w3.html

使每行中的列表项跟随该行中那些列表项的最大高度的最简单方法是什么？我也必须让它在 IE6 中工作。

非常感谢大家。

Answer 1

我建议添加一些额外的标记。也许让它成为一个列表列表。

像这样

<ul>
 <li class="row">
  <ul>
   <li class="book">
    <img />
    <h2>title</h2>
   </li>
   <li class="book">
    <img />
    <h2>title</h2>
   </li>
   <li class="book">
    <img />
    <h2>title</h2>
   </li>
  </ul>
 </li>
<!-- repeat rows here--></ul>

然后是一些 CSS

.行{ 清除:左； 向左飘浮; 最小高度:175px；

注意允许高度扩展的最小高度。您需要向 IE6 提供高度才能达到相同的效果。为此，您有很多选择。 Conditional comments是符合标准的选择之一。

最后，请注意，我使用 h2 而不是 div 来包含书名。您可能希望给标题一些语义权重，使它们在搜索中脱颖而出，因此 h2(或任何标题元素)是比 div 更好的容器。