使一行中的列表项的高度遵循其最大高度

Question

在此页面中： http://pastehtml.com/view/1biylhs.html

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

目前，每本书都包含在

中，高度为 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沿着

.row{
清除：左；
浮动：左；
最小高度：175px；
注意

允许高度扩展的最小高度。您需要将高度输入 IE6 才能达到相同的效果。为此，您有很多选择。 条件注释是符合标准的选择之一。

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

Answer 2

我用 Javascript 处理它：

function resizerows(classname) { 
    //init some vars
    var tablerowlist = new Array();
    var maxheight=0;

    //get all elements with same class
    var rowlist = document.getElementsByTagName("li");

    //loop through items and check class name
    for (var r=0; r<rowlist.length; r++) { 
        if (rowlist[r].className.indexOf(classname) != -1) {
            //if class name contains classname this is an li we are looking for, add to our array
            tablerowlist.push(rowlist[r]);
        }//end class name check
    }//end loop through all the li elements

    //loop through our good list of li elements
    for(var l=0; l<tablerowlist.length; l++) {
        //dig through the li tag and get all the elements 
        var childlist = tablerowlist[l].children;

        //init a max height

        //loop through the child elements (in this case <p> tags)
        for(var c=0; c<childlist.length; c++) { 
            //check to make sure its a P tag
            if (childlist[c].tagName == "P") { 
                //compare height of element to maxheight, if greater maxheight = element height
                if (childlist[c].offsetHeight > maxheight) { 
                    maxheight = childlist[c].offsetHeight; 
                }
            }
        }//end loop through child elements

        //now we have the maxheight loop through all the rows and set the height to max height
        for (var ch=0; ch<childlist.length; ch++) {
            childlist[ch].style.height = (maxheight)  + "px";
        }

        //reset max height;
        maxheight = 0;
    }//end loop through the li elements
}

这有点生硬，你可以使用 jquery 这样的框架获得更优雅的代码，但这对我来说很有效，跨浏览器和平台。

编辑：

这是针对 HTML 代码格式化的：

<ul>
<li class="row">
    <p class="item">Item 1</p>
    <p class="item">Item 2</p>
    <p class="item">Item 3, which is really really long text that'll be bigger than the other two items</p>
</li>

<li class="row">
    <p class="item">Item 1</p>
    <p class="item">Item 2</p>
    <p class="item">Item 3, which is really really long text that'll be bigger than the other two items</p>
</li>

Answer 3

这绝对是不容易做到的。您谈论行，但浏览器看不到行，它只是看到包裹的浮动。

你可以选择表格（不是因为它是表格，而是因为没有任何表格布局就很难做到），但我不会那么快放弃。

作为妥协，我建议让每个浮动块足够高以容纳图像和大约三行文本。然后他们每个人都有相同的高度并且排列得很好这仍然是一个猜测，但可能是你能做到的最好的。 。