Question

我的页面布局出了问题。我想创建3个表并将它们并排设置，所以我设置它们的float属性为“left”，但div容器的高度只用第3个表修复，两个第一个表是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;
}

Answer 1

有很多方法，我更希望overflow:hidden;使用#main。

http://jsfiddle.net/QBj6R/

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

Answer 2

这种问题是因为您的前两个表是浮动的。但最后一个不是这样，div会正确调整大小以包装第三个表。

但是为了让div绕过浮动表也是如此。你必须清除浮子。

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

最安全的方法是在关闭父div之前使用清算div ^[Demo]
```
<div style="clear:both"></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%;
}

Answer 3

您的表格上有float，因此您必须清除他的父母#main。

#main{
 overflow:hidden;
}

检查此http://jsfiddle.net/VbvLq/1/

Answer 4

我不确定我是否正确理解了这个问题，但是如果你想把这些表并排放置，为什么不将它们包装在另一个表中呢？例如：

<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容器？

4 个答案: