<img>要素とディスプレイ：table-cell

Question

イメージを1行横に置き換えるときに、テーブル行のセルとして置き換えようとしています。

そのレイアウトは他の要素では動作しますが、何らかの理由で<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>

任意のアイデア？

UPDATE：FFはCSS仕様に従い、1行で置き換えます。他のすべてのブラウザはそうではありません。 Heil Firefox！

Answer 1

EDIT

IMGは、計算とボックスモデルが異なって測定しています、置き換え要素です。 ARTICLE

---

にこれを参照してくださいあなたは、テーブルを使用して主張し、@StevenThomas's PenCode

のこのフォークを見て間隔を懸念している場合は、4PXをしたい場合、私はすべてのdiv

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

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

使用margin: .125emを削除;ボーダー間隔。

---

変更divがインラインブロックに

変更IMGをインラインブロックする代わりにdiv要素の

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

、あなたはテーブルを使用して試みることができます。構文は次のとおりです。

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