如何将 CSS 表 DIV 限制在另一个 DIV 中？

Question

我有一个外部 DIV，如下所示。当我在浏览器中检查时，给定类colx2-right 的外部 DIV 几乎是它所在区域的一半的正确大小。

.colx2-right {
    float: right;
    margin-bottom: 0;
    width: 48%;
}

在上面的 DIV 中，我定义了一个 CSS 表：

div.container {
    display: table;
}

如果其中一列中有大量数据，则文本会溢出colx2-right DIV 的边缘。有什么方法可以让它保持在colx2-right DIV 的边界内？

我创建了一个显示问题的小提琴。在这里您可以看到黄色和红色背景的颜色仅小于 50%，但红色背景不会限制其中的表格。

fiddle

Answer 1

我会说在 div.container 上设置 100% 的宽度应该让它按照你想要的方式工作。

如果不是这样，我可能没有正确理解您的问题。如果您在http://www.jsfiddle.net 中抛出一个示例，这将有所帮助，这样就不会造成混淆。

另一个想法（尽管我从未在 div 上使用 display: table）：既然您使用了 display: table，我们可能会假设 div 实际上是一个表格。这也意味着表格布局属性适用。

尝试设置 table-layout:fixed; 并设置 100% 宽度。