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

Question

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

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

.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 看起来完全一样。