CSS 表格布局 : make rows span full width without centering cells

Question

我的布局如 fiddle 所示:https://jsfiddle.net/4dbgnqha/4/ .出于您可以在 this 中阅读的原因发布，我不想更改页面的布局方式。

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

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

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

我该如何解决这个问题？

Answer 1

您可以将它添加到 CSS 中，这是一种 hack，但非常适合表格布局。

.item p {
    width: 100%;
}

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