Question

想象一下，您在表格单元格中有一个包含2个元素的复杂结构。就像那样：

<table>
    <tbody>
        <tr>
            <td>
                <div class="wideDiv">Here goes some very wide content</div>
                <div class="anotherDiv">This content doesn't have to be wide.</div>
            </td>
        </tr>
    </tbody>
</table>

.wideDiv的内容可能比页面本身更宽。在这种情况下，它强制.anotherDiv也获得所有这些空间。我想强制.wideDiv不要比页面本身宽（当然使用滚动），如果我们不用表格包装div，它会以这种方式工作。固定大小是一个明显的解决方案，但还有其他方法吗？

以下是工作示例： http://jsfiddle.net/GbEvT/2/

Answer 1

添加

.anotherDiv {
width: 100vw;
}

以下是更新：http://jsfiddle.net/GbEvT/4/

它告诉anotherDiv占用100％的屏幕，而不是更多。

Answer 2

在这里，你有另一个解决方案：

table {
    width: 100%;
    table-layout: fixed;
}

强制html元素不要比页面宽

2 个答案: