CODEWITHSUNDEEP
cssimagealignmentmultiple-columns
Matschek
Matschek

Reputation: 209

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>

Upvotes: 2

Views: 961

Answers (3)

sn3ll
sn3ll

Reputation: 1685

That is very interesting, and I can't explain why it behaves that way (other than welcome to cross browser development), but as a quick fix I can tell you if you add the CSS img {display: block} it will work.

Upvotes: 1

Pardeep
Pardeep

Reputation: 2283

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .columns {
        column-count: 3;    
        column-gap: 20px;
        outline: 1px dashed blue;
        width: 640px;
        }
        img {
            display: block;
        }
    </style>
</head>
<body>
<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>
<br>
<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>
</body>
</html>

Upvotes: 0

P.S.
P.S.

Reputation: 16384

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>

Upvotes: 1

Related Questions