CODEWITHSUNDEEP
css
naio
naio

Reputation: 317

row of images evenly distributed

I want a row of images evenly distributed and justified, after some research I've found this elegant method:

#container {
  text-align: justify;
  background-color: #FF0000;
}

#container img {
  display: inline-block;
}

#container:after {
  content: "";
  width: 100%;
  display: inline-block;
}

<div id="container">
  <img src="http://placehold.it/150x100" />
  <img src="http://placehold.it/100x150" />
  <img src="http://placehold.it/250x50" />
  <img src="http://placehold.it/150x150" />
</div>

See the result here: http://codepen.io/naio/pen/vbgrm

Why that little margin on the right? How can I get rid of the empty space added below the images?

Upvotes: 0

Views: 4024

Answers (3)

Marc Audet
Marc Audet

Reputation: 46795

You can remove the bottom whitespace using the following adjustments to your CSS:

#container {
  text-align: justify;
  background-color: #FF0000;
  line-height: 0;
}

#container img {
  display: inline-block;
}

#container:after {
  content: "";
  width: 100%;
  display: inline-block;
  vertical-align: bottom;
}

The generated content from the pseudo-elememt (empty string) creates an inline box that has a height equal to the line height of the containing block (#container in this example).

By setting line-height: 0, this forces any inline boxes to shrink to zero height.

Footnote

In Chrome (and similar webkit browsers), you will see some extra space to the right of the right-most element on the line. This extra space is not seen in Firefox (where I tested the code).

The extra space is the result of the white space in the original HTML mark-up. The right-most element has a white space character (CR/LF) before the closing </div> tag and this generated content is placed after the white-space, which shows up in some browsers.

You can get rid of it by modifying the HTML as follows:

<div id="container">
  <img src="http://placehold.it/150x100" />
  <img src="http://placehold.it/100x150" />
  <img src="http://placehold.it/250x50" />
  <img src="http://placehold.it/150x150" /></div>

that is, keep the closing </div> tag right next to the final img tag.

Upvotes: 2

Kristof Feys
Kristof Feys

Reputation: 1842

another approach that doesn't have this whitespace & padding issue would be: http://jsfiddle.net/eNKhy/3/

#container {  
     text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;
}
.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    vertical-align: bottom;
}
#container, #container img, .stretch{
    line-height:0;
}

and add <span class="stretch"></span> in the end of your div

Upvotes: 0

spacegospod
spacegospod

Reputation: 25

If you put some text in the #container:after's content property you will notice what it does

#container {
  text-align: justify;
  background-color: #FF0000;
}

#container img {
  display: inline-block;
}

#container:after {
  content: "This is some text";
    width: 100%;
    display: inline-block;
}

http://www.w3schools.com/cssref/sel_after.asp Check out this link for more details. #container:after adds content after everything else in the container is loaded.

One way to solve your problem is to set the container's height to 150px, but that's not a very flexible solution. If I were you I wouldn't use these styles. When you create a div and not set it's width and height it resizes automatically to fit it's children. Somehow the #container:after is blocking this feature. Just use something else :)

Upvotes: 0

Related Questions