为什么固定间隙，固定宽度列的内联块属性引入了滚动条

Question

我已经阅读了有关如何使用固定的色谱柱高度，固定色谱柱宽度和固定色谱柱间距（1，2）的问题。

例如，在this JSFiddle中，您可以在更改“结果”窗口的宽度时看到间隙发生变化。

但是，我似乎通过设置＆＃39;显示＆＃39;来实现固定的列高/宽/间隙。列容器的CSS属性为＆＃39;内联块＆＃39;：

#column {
    column-width: 360px;
    column-gap: 100px;
    -webkit-column-width: 360px;
    -webkit-column-gap: 100px;
    white-space: normal;
    display: inline-block;
    margin-bottom: 30px;
    height: 600px;
}

updated JSFiddle - 更改窗口大小时间隙不再变化，但现在有一个巨大的垂直滚动条！我的预感是这个垂直空间代表了图像在一个巨大的列中占据的空间，因为删除图像实际上缩短了垂直空间的数量（长度滚动条）。

1. 为什么设置＆＃39;显示＆＃39;到内联块＆＃39;改变柱间隙行为？
2. 为什么内联块属性会引入如此多的垂直空间？

我只看到Chrome中的超长滚动条，而不是IE11。

Answer 1

1. 简单的答案是：您正在更改块元素的显示属性，使其行为类似于内联块，因此行为将随之改变。您可以查看this answer了解每个展示属性的行为。

2. 正在创建巨大的垂直条，因为#column容器高度正在尝试容纳其中的元素，而不管这些元素实际显示的方式如何。为float: left; div添加#container将解决此问题。