Question

我想要并排放置几个表，但是当我使用float left属性时，它会从它所处的div中删除背景颜色。任何想法如何将表并排放置而不删除的背景？就像我将浮动物添加到桌子上时甚至不进入div。

由于

表示表格所在的div

 div.middle {
       background-color:#FFF;
       width:960px;
       height:auto;


       margin-left: auto;
    margin-right: auto;
    border:solid;
    border-color:#FFF;
    border-width:medium;

继承人我位于middel div内的桌子的html

<table border='1'>\n
<tr><td align='center' colspan = '10'>Division: 8a10 Grupo A</td></tr>
<tr>
<td>Equipo</td>
<td>JJ</td>
<td>JG</td>
<td>JP</td>
<td>JE</td>
<td>GF</td>
<td>GC</td>
<td>GD</td>
<td>PTS</td>
</tr>




       }

Answer 1

听起来你没有clear your floats。

<div style="background-color:blue">
   <table id="table1">...</table>
   <table id="table2">...</table>
   <div style="clear:both"><!-- clear the floats --></div>
</div>

Answer 2

使用float时，元素将从“流”中取出，外部元素通常看起来比其父元素短。

一个简单的解决方法是将overflow: auto;应用于外部div。

这是a good post about this issue and fix。

Answer 3

当您使用float时，应该使用父div清除所有浮动。一个简单的解决方法是应用overflow：auto;到您的主要父div，就像您使用背景颜色的地方一样。

Overflow:auto trick (auto clear floats)

并排放置桌子而不从div中删除背景

3 个答案: