Question

我有一个基于CSS的三列表布局。该表被设计为将前两列压缩到相对于填充它们的内容的最小宽度，以便第三列可以填充大部分视图。听起来很简单吧？好吧，第三栏一直给我带来麻烦。

该表是Webkit（基于Safari）应用程序的一部分，无论调整大小多少，它都可以填充窗口的整个宽度。因此，没有定义默认宽度。因此，当涉及到包装文本块（例如URL或仅仅是简单的重复字符垃圾邮件）时，它只会在没有换行的情况下继续。

我知道“word-wrap：break-word;”选项，但这不起作用，因为我不能定义宽度，除非我知道孩子的宽度。我也试过“断言：打破一切;” - 虽然有效，但在一个单词中间看到一个合法可以从空间切割的包裹并不吸引眼球。

有人知道纯HTML和HTML吗？ CSS 3解决方案有两个子框和第三个可以包装长文本而不必使用JavaScript或其他方法吗？

布局和代码示例：

--------------------------------------------------------------------------------------------
| Width Matches Largest Cell of Column | Same for Second |     Fill All Available Space    |
--------------------------------------------------------------------------------------------
| Width Matches Largest Cell of Column | Same for Second |     Fill All Available Space    |
--------------------------------------------------------------------------------------------

<div class="table_class">
<div class="table_row">
<div class="cell1">data</div>
<div class="cell2">data</div>
<div class="cell3">datadatadatadata…</div>
</div>
</div>

Answer 1

如果您正在显示表格数据，并尝试让您的div看起来像一张桌子，为什么不只是使用表格呢？它们被设计为具有您描述的行为类型：

http://jsfiddle.net/Mk7jS/1/

Answer 2

此表格布局是否用于表格数据？因为，在这种情况下，您应该使用表。

表不好的原因是它们用于图形布局时。他们打破了网站的semantic design。但是，如果内容是表格，那么您应该使用表格。他们已经很好地解决了排列行和列的问题。

或者，如果您需要保留div布局，则可以使用table, table-row, and table-cell显示属性。

CSS表强制包装

2 个答案: