<img> element and display:table-cell

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-qc-78-50-6.jpg" /> <img src="http://lorempixel.com/output/people-qc-78-50-5.jpg" /> <img src="http://lorempixel.com/output/animals-qc-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-qc-78-50-6.jpg"> <img src="http://lorempixel.com/output/people-qc-78-50-5.jpg"> <img src="http://lorempixel.com/output/animals-qc-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.