0

私は、div他の 2 つの div を含む を持っています。1 つは右に、もう 1 つは左にフロートし、これらの内側の DIV にはそれぞれテーブルがあります。その中にdivを含めるには、最も外側のdivが必要ですが、そうではありません。内部の div に内部のテーブルが含まれていないようです。最も外側の div には境界線があるため、その高さが含まれているコンテンツよりもはるかに短いことがわかります。

<style>
.bluebox{ border:1px solid blue; }
.floatleft
{
float:left;
}
.floatright
{
float:right;
}
</style>

これは私のHTMLです：

<div class='bluebox'>

  <div class='floatleft'>
    <table cellspacing=10>
     <tr><td class='head'> Qty ordered: </td><td> 100</td> </tr> 
     <tr><td class='head'> Description: </td><td> Business Card</td></tr>
     <tr><td class='head'>Stock: </td><td> SPRONDIGRLE WHITE</td></tr>
     <tr><td class='head'>Lamination: </td><td> XXX</td></tr>
    </table>
  </div>

  <div class='floatright'>
    <table cellspacing=10>
      <tr><td class='head'> Parent A3 Sheets: </td><td>XXX </td></tr>
      <tr><td class='head'>Finish Size: </td><td> 9 x 5cm</td></tr>
      <tr></tr>
      <tr><td class='head'>Finishing touches: </td><td> Rounded corners</td></tr>
   </table>
  </div>

</div>

境界線を表示する必要があるため、次のようなことはできませんpadding-bottom:-5000px; overflow:hidden。境界線がページを何マイルも引き延ばすからです!

4

1 に答える 1

2

フロートをクリアする必要があります。これを行う最も簡単な方法は次のようになります。

.bluebox{ border:1px solid blue; overflow: hidden }

http://jsfiddle.net/LBfxY/

これを行う方法は他にもありますが、overflow を使用するのが最も簡潔です。他の clearfix テクニックのデモを次に示します。

http://codepen.io/cimmanon/pen/qDjdr

于 2013-03-16T16:59:40.783 に答える