0

float-left クラスと float-right クラスがまさにそれを行う次の HTML があります。

<div class="block-footer">
   <button class="medium float-left">A</button>
   <button class="medium float-left">A</button>
   <button class="medium float-left">A</button>
   <button class="medium float-right">A</button>
   <button class="medium float-right">A</button>
</div>

これは機能しますが、私の div は垂直方向のスペースを占有していないようです。これは次の問題です。私がこれを行うとき：

<div class="block-footer">
   <button class="medium float-left">A</button>
   <button class="medium float-left">A</button>
   <button class="medium float-left">A</button>
   <button class="medium float-right">A</button>
   <button class="medium">A</button>
</div>

次に、DIV がスペースを占有します。

では、いくつかのボタンを左と右にフロートさせて、DIV に垂直方向のスペースを使用させるにはどうすればよいでしょうか?

4

1 に答える 1

2

overflow:autoコンテナ divに設定する必要があります。

jsFiddle の例

これは、ブロック フォーマット コンテキストが原因です。それがどのように機能するかについては、この質問への回答を確認してください。基本的に、フロートはまさにそれを行い、フロートし、ドキュメント フローから削除されたように動作します。これにより、コンテナ div が折りたたまれます。

于 2013-10-23T19:53:51.193 に答える