CSS表格布局：使行跨越全宽而不使单元格居中答案

【问题标题】：CSS Table layout: make rows span full width without centering cellsCSS表格布局：使行跨越全宽而不使单元格居中
【发布时间】：2023-03-14 11:42:01
【问题描述】：

我的布局如下图所示：https://jsfiddle.net/4dbgnqha/4/。出于您可以在this 帖子中了解的原因，我不想更改页面的布局方式。

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

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

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

我该如何解决这个问题？

【问题讨论】：

标签： css layout

【解决方案1】：

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

.item p {
    width: 100%;
}

【讨论】：

【解决方案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

【讨论】：