javascript - 如何将列表显示为表格？

Question

我有一个内容不同的项目列表向左浮动，我需要将它们显示为一行。

<ul>
<li>small content..</li>
<li>medium Content..</li>
<li>large content..</li>
..
<!-- many item random contnet -->
</ul>

我想连续显示列表项。
行高取决于行中的最大高度项目，如何获得它？

演示

Answer 1

添加display:table-cell使其充当表格列。删除float:left。

#contentpane{}
#contentpane li{
    padding:10px;
    width:80px;
    border:1px solid #000;
    display:table-cell
}

演示

---

案例二

如果您需要自动高度，请使用以下white-space:nowrap;方法

ul#contentpane{
    width:100%;  
    white-space:nowrap;

}
#contentpane li{
    padding:10px;
    width:80px;
    border:1px solid #000;
    height:auto;
    display:inline-block;
    white-space:normal !important;
}

演示 2 || 演示（垂直对齐顶部）

Answer 2

您应该使用 javascript 将 clear:both 设置为行溢出元素。

 var ch=$("#container").width();

    var itemsPerRow=Math.floor(ch/102);

    var itemsCount=$("#contentpane li").length;
    var loopRound=Math.floor(itemsCount/itemsPerRow);

    for(var i=1;i<loopRound+1;i++)
    {
        var nextFirstItem=i*itemsPerRow+1;

        $("#contentpane li:nth-child("+ nextFirstItem  +")").css({"clear":"both"});
    }

演示

Answer 3

ul {
    display: table-row;
}

ul  > li {
    display: table-cell;
}

请注意，您应该有一个包装器，display: table以便构建完整的表表示。

Answer 4

试试这个

var maxHeight = 0;
 $("#contentpane li").each(function( index ) {
     var height = $(this).height();
     if(height  > maxHeight){
         maxHeight =height;
      }
 });

$("#contentpane li").css("height",maxHeight);

小提琴演示

Answer 5

将高度设置为 li。

#contentpane{

}
#contentpane li{
    float:left;
    padding:10px;
    width:80px;
    height:180px;
    overflow:auto;
    display:table-cell;
    border:1px solid #000;
}

小提琴

Answer 6

删除浮动并使用 inline-block 代替：

http://jsfiddle.net/CmkSb/10/

#contentpane li{
    padding:10px;
    width:80px;
    display:inline-block;
    vertical-align: text-top;
    border:1px solid #000;
}