<img>元素和显示:table-cell

Question

我试图替换单个水平行中的图像 - 作为表格行中的单元格.

该布局适用于任何其他元素,但<img>由于某种原因不适用.

检查一下:

div { display:table; border:1px solid red; }
div > img { display:table-cell; }

<p>These shall be replaced in single row but they are not:</p>

<div>
  <img src="http://lorempixel.com/output/city-q-c-78-50-6.jpg">
  <img src="http://lorempixel.com/output/people-q-c-78-50-5.jpg">
  <img src="http://lorempixel.com/output/animals-q-c-78-50-5.jpg">
</div>

任何的想法？

更新:FF遵循CSS规范并将其替换为单行.所有其他浏览器都没有.Heil Firefox!

Answer 1

编辑

img 是替换元素，它的测量计算和盒子模型不同。请参阅这篇文章

如果您坚持使用表格并且担心间距，请查看 @ StevenThomas 的 PenCode的这个分支

我删除了所有的div

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

img { display: inline-table; margin: .33em; width: 30%; height: auto; }

margin: .125em如果你想要 4px，请使用；边框间距。

将 div 更改为内联块

将 img 更改为内联块

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

img { display: inline-table; margin: .33em; width: 30%; height: auto; }

div {
  display: inline-block;
  border: 1px solid red;
}
div > img {
  display: inline-block;
}