html - 表格单元格属性忽略宽度

Question

我为 div 设置了一个 CSS 属性 table-cell。我还指定了 div 的宽度并将溢出设置为隐藏，但是由于 table-cell 属性，div 不关心宽度。如果我放置任何大图像，它会超出宽度。如何使用表格单元格并为 div 使用固定宽度？

.right{
    display: table-cell;
    overflow: hidden !important;
    vertical-align: top;
    width: 400px;
}

Answer 1

奇怪，这个 JSFiddle似乎对我有用。

你在什么浏览器中遇到问题？

此外，要强制表格单元格的最大宽度，请使用该max-width属性。你可以在这里看到它，代码如下。

HTML：

<div class='table'>
  <div class='tr'>
    <div class='right'>hey</div>
  </div>
</div>​

CSS：

.table {
    display: table;
}
.tr {
    display: table-row;
}
.right{
    display: table-cell;
    overflow: hidden !important;
    vertical-align: top;
    max-width: 400px;
    outline: 1px solid #888;
}​

Answer 2

display: table-cell将遵循表格大小规则 - 如果内容太大，它将扩展以使其适合。

你真的需要使用display: table-cell吗？为了使其工作，您必须将其包装在另一个 div 中，将其宽度设置为 400 并将其设置为，overflow: hidden但这似乎适得其反。