CSS 多列布局 - Chrome 不允许右列比左列长？

Question

我刚刚对我的网站进行了编码。我是一名摄影师，所以我所有的内容都是图片。每张图片都组织在一个 div- 框中。

我使用了灵活的多列布局：

.content {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
max-width:1400px;
}

Explorer 和 Firefox 运行完美，但 Chrome 不允许右栏比左栏长，看起来很糟糕：

http://www.rosioffenbach.com/tarotpt1.html

右侧有一堆空格。

非常感谢您的帮助。不得不说我是初学者

我试过了

-webkit-column-fill：余额； -webkit-column-fill: balance-all; 但是我没有工作

.content {
width:70%;
position: relative;
margin-right: auto;
margin-left: auto;
padding-top:1%;
max-width:1400px;
}


.content {
  -webkit-column-count: 1;
  -webkit-column-gap: 3%;
   -moz-column-count: 1;
 -moz-column-gap: 3%;
  column-count: 1;
  column-gap: 3%;
}

我希望 firefox 和 explorer 中的列尽可能相等，并且包括右列比左列长的选项。

Answer 1

尝试从 .contentstrecke{ } 中删除 display: inline-block。删除后，Firefox 和 Chrome 看起来完全一样。

CSS 多列布局 - Chrome 不允许右列比左列长？

CSS Multi-column Layout - Chrome does not allow to have the right column longer than the left?

css

multiple-columns

column-count