html - 100% 宽度的表格，为 float div 留出空间

Question

我有一个用于表单的表格。该解决方案需要它可以自动调整以适应两种情况:

• 当表格右侧没有 float div 时，我想要表格占据 100% 的宽度。

• 当表格右侧有一个 float 的div时，我希望表格给这个div留出空间，并占用剩余的水平空间。

我该怎么做？

Answer 1

将表格放在一个带有 overflow 的 div 中，该 overflow 不是visible，它将占据 float 元素旁边的剩余区域。然后，里面的表格可以有一个 width:100%。代码在下面，这是一个 jsfiddle 示例:http://jsfiddle.net/rgthree/uEt35/

CSS

.floater {
    float:right;
}

.tbl-container {
    overflow:hidden;
}

.tbl-container > table {
    width:100%;
}

HTML

​<div class="floater">
   This is to the right.
</div>
<div class="tbl-container">
    <table>
        <tr>
            <td>hi</td>
        </tr>
    </table>
</div>