三个桌子并排溢出的div容器？

问题描述：

我有我的页面的布局问题。我要创建3个表，并设置它们并排，所以我将它们的浮动属性是“左”，但DIV容器的高度只与3台固定，两个第一表是div的溢出。请帮我解决它。这是我三个桌子并排溢出的div容器？

页

<body> 

<div id="main"> 

    <table id="tbSA" class="tb"> 
     <tr><td>Code</td></tr> 
     <tr><td>Code</td></tr> 
     <tr><td>Code</td></tr> 
     <tr><td>Code</td></tr> 
     <tr><td>Code</td></tr> 
    </table> 

    <table id="tbShops" class="tb"> 
     <tr><td>Code</td></tr> 
     <tr><td>Code</td></tr> 
     <tr><td>Code</td></tr> 
     <tr><td>Code</td></tr> 
    </table> 

    <table> 
     <tr><td>Code</td></tr> 
     <tr><td>Code</td></tr> 
     <tr><td>Code</td></tr> 
    </table> 

</div> 
</body>

，这里是风格

body { 
    background-color: #5c87b2; 
} 
#main { 
    margin: 10px 10px 15px 10px; 
    background-color: #fff; 
} 

table, td { 
    border: solid 1px #e8eef4; 
} 

.tb { 
    float:left; 
    margin-right:10px; 
}

答

这类问题，是因为你的前两个表中浮动。但最后一个不是那么那么div会正确地调整它来包装第三个表。

但它为了使div也围绕浮动表。你必须清除漂浮物。

有很多方法来解决这个问题：

最安全的办法就是关闭父DIV ^[Demo]
```
<div style="clear:both"></div> 
```
老流行的方式是前使用，结算DIV给overflow:hidden这将迫使div环绕所有元素。 这是其他的答案都集中了[Demo]

第三种方式是使用.clearfix类是时下最流行的方式。 [Demo]

.clearfix:after { 
    content: "."; 
    display: block; 
    clear: both; 
    visibility: hidden; 
    line-height: 0; 
    height: 0; 
} 

html[xmlns] .clearfix { 
    display: block; 
} 

* html .clearfix { 
    height: 1%; 
}

答

方法有很多种，我宁愿使用overflow:hidden;的#main。

http://jsfiddle.net/QBj6R/

#main { 
    margin: 10px 10px 15px 10px; 
    background-color: #fff; 
    overflow:hidden; 
}

参见[这]（http://stackoverflow.com/a/1633170/295264）回答为什么溢出隐藏并不总是 – Starx 2012-03-17 11:49:47

答

你的表有它float所以你必须明确他父母是#main。

#main{ 
overflow:hidden; 
}

检查这个http://jsfiddle.net/VbvLq/1/

参见[这]（HTTP的最佳方法：/ /stackoverflow.com/a/1633170/295264）回答，看看为什么溢出隐藏并不总是最好的方法 – Starx 2012-03-17 11:50:00

@Starx它永远不是一个坏的方法因为它的工作，直到IE6。但是。clearfix有限制它的工作，直到IE8 – sandeep 2012-03-17 12:12:09

你让我错了，我不是说它的坏。 – Starx 2012-03-17 12:13:19

答

我不知道如果我理解正确的问题，但如果你想一边把桌子边，你为什么不只是包装他们在另一个表？例如：

<div id="main"> 
    <table> 
     <tr style="width:33%;"> 
      <td > 
       <table id="tbSA" class="tb"> 
        <tr><td>Code</td></tr> 
        <tr><td>Code</td></tr> 
        <tr><td>Code</td></tr> 
        <tr><td>Code</td></tr> 
        <tr><td>Code</td></tr> 
       </table> 
      </td> 
      <td style="width:33%;"> 
       <table id="tbShops" class="tb"> 
        <tr><td>Code</td></tr> 
        <tr><td>Code</td></tr> 
        <tr><td>Code</td></tr> 
        <tr><td>Code</td></tr> 
       </table> 
      </td style="width:33%;"> 
      <td> 
       <table> 
        <tr><td>Code</td></tr> 
        <tr><td>Code</td></tr> 
        <tr><td>Code</td></tr> 
       </table> 
      </td> 
     </tr> 
    </table> 
</div>

设置在包裹台上每个TD的宽度到33％，这将设置所有表彼此相邻

三个桌子并排溢出的div容器？

相关推荐