Geek Answers Handbook

<img> element and display: table-cell

I am trying to replace images in one horizontal row - like cells in a table row.

This layout works for any reason with any other elements, but not with <img> .

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 the CSS specification and replaces them on a single line. All other browsers are not. Heil Firefox!

+6
source share
2 answers

EDIT

img is a substituted element, measured calculations and box model are different. See ARTICLE

If you insist on using a table and are worried about layout, look at this fork @ StevenThomas PenCode

I deleted all 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>
0
source

Instead of a div, you can try using a table. Here is the syntax:

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

The triples of tags are strings, td tags are columns. I would use this syntax:

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

More articles:


All Articles