考虑这个样本。这是一个非常简单的 CSS 表格,有一行和三个几乎相同的单元格,每个单元格包含一个 1000x1000px 的黑色方块 max-width: 100% ,但是单元格中文本的长度因单元格而异。

.table {
	display: table;
}

.row {
	display: table-row;
}

.cell {
	display: table-cell;
	max-width: 500px;
}

img {
	max-width: 100%;
}

.title {
	font-size: 4em;
}
<div class='table'>
	<div class='row'>
		<div class='cell'>
			<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAPoAQMAAAB3bUanAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAARnQU1BAACxjwv8YQUAAAABc1JHQgCuzhzpAAAAA1BMVEUAAACnej3aAAAAkUlEQVR42u3BMQEAAADCoPVPbQo/oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAvgbsPwABNAyb4wAAAABJRU5ErkJggg==" alt="black 1000x1000px square" />
			<div class='title'>1234567890 12345 67890</div>
		</div>
		<div class='cell'>
			<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAPoAQMAAAB3bUanAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAARnQU1BAACxjwv8YQUAAAABc1JHQgCuzhzpAAAAA1BMVEUAAACnej3aAAAAkUlEQVR42u3BMQEAAADCoPVPbQo/oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAvgbsPwABNAyb4wAAAABJRU5ErkJggg==" alt="black 1000x1000px square" />
			<div class='title'>12345 67890</div>
		</div>
		<div class='cell'>
			<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAPoAQMAAAB3bUanAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAARnQU1BAACxjwv8YQUAAAABc1JHQgCuzhzpAAAAA1BMVEUAAACnej3aAAAAkUlEQVR42u3BMQEAAADCoPVPbQo/oAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAvgbsPwABNAyb4wAAAABJRU5ErkJggg==" alt="black 1000x1000px square" />
			<div class='title'>12 34567</div>
		</div>
	</div>
</div>


运行代码段并调整浏览器窗口的大小,以便某些文本需要换行到下一行。 (小于~800px 宽的视口(viewport)就足够了。)

实际:第一个单元格仍然很大,而第二个和第三个单元格的尺寸缩小。

html - CSS 显示 :table images in cells don&#39;t match height-LMLPHP

预期:我预期(并希望)此表中的所有图像大小相同。

为什么会这样?怎样才能达到我预期的效果?

最佳答案

在表中,max-width 不会在所有情况下都有效,甚至 width 也可能根据内部内容的大小而变化。在您的示例中,如果您在每个单元格的 <div class='title'> 中删除或放置完全相同的文本,那么它将平均分配单元格,因为所有单元格的内容长度都完全相同。

如果你想在任何情况下保持等宽单元格,你可以申请:

.table {
  display: table;
  table-layout: fixed;
  width: 100%;
}

将会发生的事情是浏览器将在数据加载之前呈现表格布局。它不会关心里面有什么,并且始终保持等宽单元格,除非您手动设置 CSS width ,或者在标记中使用 <col><td width="nn">

如果您希望表格宽度在需要时超出容器(在您的示例中为主体视口(viewport))。您可以申请:
.table {
  display: inline-table;
}

关于html - CSS 显示 :table images in cells don't match height,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/52431062/

10-12 00:17
查看更多