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>