CSS Table 布局：使行跨越整个宽度而不使单元格居中

Question

我的布局如 fiddle 所示：https://jsfiddle.net/4dbgnqha/4/. For reasons that you can read about in post，我不想更改页面的布局方式。

现在，它工作得很好，但问题是当我在 .item div 的底部添加边框时，我意识到它们没有跨越页面的整个宽度。正如你在上面看到的 fiddle，第二个 .item 没有足够的内容来填充宽度，所以它的边框没有达到全宽。

我以为我可以通过添加 .item { width: 100%; } 来解决这个问题，但是当我这样做时，图像会添加足够的额外宽度以使 p 居中，这看起来真的很奇怪。演示：https://jsfiddle.net/4dbgnqha/7/

我知道如果我为图像添加一个设置的宽度它会解决，但正如我在原来的 post 中提到的那样，我希望它非常灵活，能够有很多图像宽度。我也知道，如果我将图像包裹在一个元素中并将该元素设置为非常小的宽度，例如 1px，它会起作用，但这似乎是一种 hack，也是我这样做的原因愚蠢 table 布局首先是我试图避免任何此类黑客攻击。

我该如何解决这个问题？

Answer 1

您可以将其添加到 CSS 中，这是一个 hack，但与 table 布局配合得很好。

.item p {
    width: 100%;
}

https://jsfiddle.net/4dbgnqha/8/

Answer 2

您需要将宽度 100% 添加到 .item p 元素，以便它获得最大可用宽度，否则该元素将获得 width:auto。所以只需像这样添加 width:100%：

.item p {
    margin: 0px;
    display: table-cell;
    vertical-align: top;
    width: 100%;
}

编辑：嗯，现在我看到它已经回答了，但是对于任何正在寻找信息的人，this is why it happens

CSS Table 布局：使行跨越整个宽度而不使单元格居中

CSS Table layout: make rows span full width without centering cells

css

layout