Matschek Matschek - 1 year ago 84
CSS Question

Images not spreaded over column count

I am aligning three images of equal size within a three-column layout.
This should lead to three images in a row.
It works as expected in IE11, Edge, FF, but Chrome does not what it should: It shows image 1+2 in the first column, image 3 is in the second column.
What is Chrome doing here? If I give the containing div a fixed height of e.g. 120px the three images are aligned as expected, side by side.

Snippet:



.columns {
column-count: 3;
column-gap: 20px;
outline: 1px dashed blue;
width: 640px
}

<div class="columns">
<img src="http://via.placeholder.com/200x100" >
<img src="http://via.placeholder.com/200x100/a00" >
<img src="http://via.placeholder.com/200x100/00a" >
</div>

<div class="columns">
Are the 3 columns working with text elements? Yes, Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie
</div>




Answer Source

imgs are inline elements by default, so you can give img {display: block;} and it will solve the issue:

.columns {
  column-count: 3;	
	column-gap: 20px;
  outline: 1px dashed blue;
  width: 640px;
}

img {
  display: block;
}
<div class="columns">
  <img src="http://via.placeholder.com/200x100" >
  <img src="http://via.placeholder.com/200x100/a00" >
  <img src="http://via.placeholder.com/200x100/00a" >
</div>

<div class="columns">
  Are the 3 columns working with text elements? Yes, Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie 
</div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download