CSS表格布局:使行跨越整个宽度，而不居中单元格

Question

我有一个布局，如图所示：https://jsfiddle.net/4dbgnqha/4/.出于你可以在这篇文章中阅读到的原因，我不想改变页面的布局方式。

现在，它工作得相当好，但问题是，当我在.itemdiv的底部添加边框时，我意识到它们并没有覆盖页面的整个宽度。正如你在上面的小提琴中看到的，第二个.item向下没有足够的内容来填充宽度，所以它的边界没有达到整个宽度。

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

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

如何解决此问题？

Answer 1

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

.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%;
}

编辑：好吧，现在我看到它已经被回答了，但对于任何寻找信息的人来说，这就是为什么它会发生