1

さまざまなコンテンツが左に浮かんでいるアイテムのリストがあり、それらを行として表示する必要があります。

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

リスト項目を一列に並べて表示したいと思います。
行の高さは、行のアイテムの最大高さに依存します。取得方法は?

デモ

4

6 に答える 6

4

display:table-cellテーブル列として機能するように追加します。同様に削除float:leftします。

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

デモ

ケース 2

自動高さでそれが必要な場合は、以下の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 || デモ (上に垂直に配置)

于 2013-04-03T10:19:04.290 に答える
2

clear:both を行オーバーフロー要素に設定するには、javascript を使用する必要があります。

 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"});
    }

デモ

于 2013-04-03T11:01:30.527 に答える
1 
ul {
    display: table-row;
}

ul  > li {
    display: table-cell;
}

display: table完全なテーブル表現を構築するには、ラッパーが必要であることに注意してください。

于 2013-04-03T10:20:30.663 に答える
0

高さを li に設定します。

#contentpane{

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

フィドル

于 2013-04-03T10:24:19.457 に答える
0

これを試してみてください

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

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

フィドルのデモ

于 2013-04-03T10:22:27.110 に答える