表格单元格属性忽略宽度

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但这似乎适得其反.