<img/>元素和display：table-cell

Question

我正在尝试将单个水平行中的图像替换为表格行中的单元格。

该布局适用于任何其他元素，但出于某种原因不适用于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>

{{1}}

有什么想法吗？

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

Answer 1

修改

img是一个替换元素，它的测量计算和盒子模型是不同的。见ARTICLE

如果你坚持使用表并关注间距，请查看@ StevenThomas's PenCode的这个分支

我删除了所有div

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

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

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

将div更改为内联块

将img更改为inline-block

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

<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>

Answer 2

您可以尝试使用表格而不是div。这是语法：

    <table>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    <tr>
    <td></td>
    <td></td>
    <td></td>
    </tr>
    </table>

tr标签是行，td标签是列。我会用这个语法：

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

Answer 3

        div {
            display: inline-flex;
            border: 1px solid red;             
        } 

        div > img {
            height: 250px;
            width: 250px;
            display: table-cell;
        }

在这里，我只是将display：table替换为display：inline-flex，这对我有用。