css - 图像未分布在列数上

Question

我在三列布局中对齐三个大小相同的图像。这应该导致连续三个图像。它在 IE11、Edge、FF 中按预期工作，但 Chrome 没有按预期运行:它在第一列中显示图像 1+2，在第二列中显示图像 3。Chrome 在这里做什么？如果我给包含的 div 一个固定的高度，例如120px 三张图片按预期并排对齐。
片段:

.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 1

img 默认是 inline 元素，所以你可以给 img {display: block;} 它会解决这个问题:

.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>