1

現在、次の HTML があります。

<div class="clearfix">
   <div style="width:33%;float:left">content</div>
   <div style="width:33%;float:left">content</div>
   <div style="width:33%;float:left">content</div>
</div>

1 行に 3 つの div がある場合、それぞれにパーセンテージ幅を指定したため、それらはすべて親の幅の幅を完全に占有します。私が達成しようとしているのは、ライン上に存在する div の数に応じて、フローティング div の幅を自動調整することです (つまり、パーセンテージ幅をハードコーディングする必要はありません)。たとえば、2 つの div がある場合、それぞれが親の全幅の半分 (つまり 50%) を占めます。3 div の場合は 33% です。

これはフローティング div で可能ですか? そうでない場合、このタイプの流動的なレイアウトを実現するために他にどのような方法を使用できますか? 親に「テーブル」ディスプレイを使用させ、内側の div に「テーブルセル」ディスプレイを使用させることを検討しましたが、親が使用可能な幅の 100% を占めるのをやめました。

4

3 に答える 3

5

あなたのテーブル アプローチは私にとってはうまくfloat:leftいきました。子の div から を削除することを忘れないでください。

于 2012-10-05T12:28:08.233 に答える
1

jQuery を使用して、スタイルの動的な変更を実現できます。

var divcnt = $(".clearfix div").length;
var widthInPercent = 100.0 / divcnt;
$(".clearfix div").each(function() {
    $(this).css("width", widthInPercent+"%")
});

例については、このデモを参照してください。

于 2012-10-05T12:44:17.633 に答える
0

次のようなcssを使用してみることができます

display:box;

foreparent div. と

box-flex:1

入れ子の場合。サンプルについては、このリンクを参照してください。

于 2012-10-05T12:27:20.043 に答える