1

別の div の中にたくさんの div を入れようとしていて、使用可能なスペースに合わせてテーブルの列のサイズを変更する方法のようなことをしようとしていますが、この場合、内部の div が最小サイズに縮小されると、代わりにラップされます。

私は次のようなものを持っています

<div style="width: 100%">
  <div style="float: left; min-width:30px; padding: 4px">Text 1</div>
  <div style="float: left; min-width:30px; padding: 4px">Text 2</div>
  <div style="float: left; min-width:30px; padding: 4px">Text 3</div>
  <div style="float: left; min-width:30px; padding: 4px">Text 4</div>
  <div style="float: left; min-width:30px; padding: 4px">Text 5</div>
</div>

それは正しくラッピングを行いますが、それらすべてを1行に収める余地がある場合、内側のものは拡張されないようです。これは今すぐ実行できますか (FlexBox をまだ実装していないブラウザをサポートする必要があることに注意してください)?

4

1 に答える 1

2

これがまさにあなたが望むものかどうかはわかりませんが、内側の要素にパーセンテージベースの幅を設定することをお勧めします。

.cell {
   width:19%;
}

次のような HTML を使用します。

<div style="width: 100%">
  <div class="cell" style="float: left; min-width:30px; padding: 4px">Text 1</div>
  ...
</div>

これが実際の例です

于 2013-05-01T16:03:35.837 に答える