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

这是非常有趣的，我无法解释为什么它的行为方式（除了欢迎跨浏览器开发），但作为一个快速修复，我可以告诉你，如果你添加CSS img {display: block}它将工作。

Answer 2

img默认为inline个元素，因此您可以提供img {display: block;}并解决此问题：

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

图像未在列数上扩散

3 个答案: