Javascript 使一行中列表项的高度跟随其最大高度

在本页中：

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

目前，每本书都包含在一个

中，高度为175px

我可以将其高度设置为“自动”，但仍无法使同一行中的所有列表项都跟随其中最大的高度：

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

---

非常感谢大家。

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

你可以选择表格（不是因为它是表格，而是因为这种布局很难没有表格），但我不会那么快放弃

---

作为一种折衷方案，我建议将每个浮动块设置得足够高，以容纳图像和大约三行文本。然后他们每个人都有相同的高度和整齐的排列这仍然是一个猜测，但可能是你能做的最好的

我建议添加一些附加标记。也许可以列一个清单

像这样的

<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以实现相同的效果。要做到这一点，你有很多选择。是符合标准的选择之一

---

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

我使用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
}

函数resizerows（类名）{
//初始化一些变量
var tablerowlist=新数组（）；
var maxheight=0；
//使用相同的类获取所有元素
var rowlist=document.getElementsByTagName（“li”）；
//循环遍历项并检查类名
对于（var r=0；r个人而言，如果它是表格信息，我仍然会使用表格。我认为，如果您使用容器和浮动/清除的组合，您应该能够实现这一点。我现在只有5分钟的休息时间，但无法演示。稍后将返回并尝试制定解决方案。如上所述，如果您使用表格数据，请使用表格。i fo而且，尝试使用CSS烟火可能令人满意，但太耗时了。@Mic这不是表格数据。你可以说书的图像和标题可以显示为表格，但这是纯粹的布局。@joeri，我的意思是表格布局当你有四行文本时，当然，或者如果有人增加字体大小，这将不起作用e、 计算最坏情况下的垂直空间，并将该高度应用于所有项目。如果最坏情况为7行文本，并且此最坏情况不经常出现，则这不是一个好主意。将所有列表项目设置为最坏情况固定高度将在大多数情况下留下太多的高度空间，这看起来很奇怪。每行可能有它自己的最大高度，这就是问题的关键。
<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>