Display two inline images per div with resizing

Question

I am trying to display several images using div and span.

div.graph {
  white-space: nowrap;
}

span.graph {
  display: inline-block;
}

img.graph {
  width: 50%;
  height: 50%;
}

<div class="graph">
  <span class="graph">
    <img class="graph" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Jsfiddle-logo.png">
    <img class="graph" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Jsfiddle-logo.png">
  </span>
</div>
<div class="graph">
  <span class="graph">
    <img class="graph" src="https://upload.wikimedia.org/wikipedia/commons/f/f9/Jsfiddle-logo.png">
  </span>
</div>

The first row of images displays correctly. The second row only has one image and it is smaller than the images in the first row.

How can I change my HTML and CSS so that the image in the second row is the same size as the images in the first row?

score 2 · Accepted Answer · edited Mar 22 '17 at 15:13

2

I removed the inline block and it seems good:

div.graph {
  white-space: nowrap;
}

img.graph {
  width: 50%;
  height: 50%;
}

<div class="graph">
  <span class="graph">
    <img class="graph" src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo-white.svg">
    <img class="graph" src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo-white.svg">
  </span>
</div>
<div class="graph">
  <span class="graph">
    <img class="graph" src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo-white.svg">
  </span>
</div>

This works because white-space: nowrap; in the parent div combined with width: 50%; in the img is enough to get the desired result. The inline-block value is used to make block elements (e.g. div) behave like inline elements (e.g. span) and should not have been added to the span elements.

edited Mar 22 '17 at 15:13

answered Mar 22 '17 at 14:31

Jason Delaney

458
8
21

This solved my problem. May I ask you to explain why this solves the problem? – Mar 22 '17 at 14:37
1

As you are using the white-space with no wrap this takes care of it for you, and you are setting your image width too 50%. – Jason Delaney Mar 22 '17 at 14:51
1

If you are happy with the solution could you accept answer :-) – Jason Delaney Mar 22 '17 at 14:57

score 1 · Answer 2 · answered Mar 22 '17 at 14:46

The code bolow is more like a work around. I think there are better solutions.

Add another image to your second row and add an extra class to it, for example .hide, and then in the css:

img.hide {
  visibility: hidden;
}

div.graph {
  white-space: nowrap;
}

span.graph {
  display: inline-block;
}

img.graph {
  width: 50%;
  height: 50%;
}

img.hide {
  visibility: hidden;
}

<div class="graph">
  <span class="graph">
    <img class="graph" src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo-white.svg">
    <img class="graph" src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo-white.svg">
  </span>
</div>
<div class="graph">
  <span class="graph">
    <img class="graph" src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo-white.svg">
    <img class="graph hide" src="http://doc.jsfiddle.net/_downloads/jsfiddle-logo-white.svg">
  </span>
</div>

Hope it helped

score 0 · Answer 3 · answered Mar 22 '17 at 14:33

0

Change the inline-block on span.graph to display: flex;

inline-block has a lot of weird issues with white space and spacing that can be avoided by using flexes.

To re add space between the rows you can just add margins to the div.

answered Mar 22 '17 at 14:33

mikeg542

423
3
17

Display two inline images per div with resizing

3 Answers3