16

フローティングである<div>2つの内部を含むラッパーがあります。<div>

<div class="outside" style="border:1px solid #555;">
  <div class="inside" style="float:left; width:40px;">CONTENT</div>
  <div class="inside2" style="float:left; width:40px;">CONTENT</div>
</div>

問題は、 2つの内部がそれぞれ<div>40pxであるため、ラッパーの幅が80pxであるということです。ただし、ラッパーは<div>常に高さが高く、境界線が上部の線のように見えます。<div>0px

そこで、2つ<div>の内側をの中に配置しました<table>。それはうまくいきました。しかし、どうすればこの問題を回避でき<table>ますか？

4

3 に答える 3

48

overflow: hidden親に設定します。

<div class="outside" style="border:1px solid #555;overflow:hidden;">
  <div class="inside" style="float:left; width:40px;">CONTENT</div>
  <div class="inside2" style="float:left; width:40px;">CONTENT</div>
</div>
于 2012-05-23T16:57:15.727 に答える
11

外側の2つの子が浮いているため、外側divは崩壊しています。divこれに対する最も簡単な修正はoverflow: hidden;、外側に設定することdivです。

于 2012-05-23T16:59:55.230 に答える
3

これを試して：

<div class="outside" style="border:1px solid #555; overflow:auto">
<div class="inside" style="float:left; width:40px;">CONTENT</div>
<div class="inside2" style="float:left; width:40px;">CONTENT</div>
</div>//Outside container close
于 2012-05-23T16:58:46.047 に答える