<img> element and display:table-cell - html

Question

I am trying to replace images in a single horizontal row - as cells in a table row.
That layout works with any other elements but not with <img> for some reason.
Check this:
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>
Any idea?
UPDATE: FF follows CSS spec and replaces them in single row. All other browsers are not. Heil Firefox!

Answer 1

EDIT
img is a replaced element, it's measured calculations and box model are different. See this ARTICLE
If you insist on using table and are concerned about spacing look at this fork of #StevenThomas's PenCode
I removed all the divs
.container { display: table; table-layout: auto; width: 100%; }
img { display: inline-table; margin: .33em; width: 30%; height: auto; }
Use margin: .125em if you want 4px; border-spacing.
Change div to inline-block
Change img to 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

Instead of a div, you could try using a table. Here's the syntax:
<table>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
The tr tags are rows, the td tags are columns. I'd use this syntax:
<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;
}
Here,I just replaced display:table to display:inline-flex and this worked for me.