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

时间:2015-11-22 21:42:27

标签: html css

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

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

3 个答案:

答案 0 :(得分:0)

修改

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>

答案 1 :(得分:0)

您可以尝试使用表格而不是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>

答案 2 :(得分:0)

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

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

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