Question

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

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

目前，每本书都包含在<li>中，其高度为175像素。

我可以将它们的高度设置为auto，但仍然无法使同一行中的所有列表项都遵循其中最大的高度：

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

最后，请注意我使用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

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

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

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

使列表项的高度成为最大高度

3 个答案: