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

Question

我有一个如此小提琴所示的布局：https://jsfiddle.net/4dbgnqha/4/。由于您可以在this帖子中阅读的原因，我不想改变网页的布局方式。

现在，它运行得相当好，但问题是当我在.item div的底部添加边框时，我意识到它们不会跨越页面的整个宽度。正如您在上面提到的那样，第二个.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

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

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

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