如何使用CSS列数修复Chrome错误？

Question

Chrome是否有解决列计数的解决方案？

在Firefox中有效：

在Chrome中不是：

Codepen：https://codepen.io/online123/pen/qBbErZg

。box将具有不同的高度（取决于文本，内部图像）。。box宽度为且应保持静态（320px）。当我使用display：block;对于。box，然后将页边距缩小，并将框分为许多列（break-inside：avoid；无济于事）。列数更改取决于屏幕宽度。

.content {
	min-height:100%;
    margin-top:100px;
}

.main {
	width:70%;
	margin:auto;
	padding-top:60px;
	padding-bottom:10px;
}

.under {
	width:70%;
	margin:auto;
	text-align:center;
	overflow:auto; 
    justify-content:center;
	position:relative;
	column-count:5;
	-moz-column-count:5;
    -webkit-column-count:5;
	-webkit-column-fill:balance;
	-moz-column-fill:balance;
	column-fill:balance;
}


.box {
	text-align:center;
	width:320px;
	padding:10px;
	margin:10px;
	display:inline-block;
	border: 1px solid white;
	background-color:#363636;
	position:relative;
	-webkit-column-break-inside:avoid;
	page-break-inside:avoid;
	break-inside:avoid;
    -moz-column-break-inside:avoid;
    column-break-inside:avoid;
}

@media screen and (max-width: 2450px) {
		.under {
			column-count: 4;
			-moz-column-count:4;
			-webkit-column-count:4;
		}
}

@media screen and (max-width: 1900px) {
		.under {
			column-count: 3;
			-moz-column-count:3;
			-webkit-column-count:3;
		}
}

@media screen and (max-width: 1400px) {
		.under {
			column-count: 2;
			-moz-column-count:2;
			-webkit-column-count:2;
		}
}

@media screen and (max-width: 950px) {
		.under {
			column-count: 1;
			-moz-column-count:1;
			-webkit-column-count:1;
		}
}

@media screen and (max-width: 700px) {
	.main {
		width:95%;
		}
	.under {
		width:95%;
		}
}

.h80 {
  height:80px;
}

.h150 {
  height:150px;
}

.h300 {
  height:300px;
}

.h500 {
  height:500px;
}

.h1000 {
  height:1000px;
}

* {
	margin:0;
	padding:0;
	box-sizing:border-box;
  background-color:black;
}

<div class="content">
<div class="under">
  <div class="box h80"></div>
  <div class="box h80"></div>
  <div class="box h80"></div>
  <div class="box h80"></div>
  <div class="box h300"></div>
  <div class="box h80"></div>
  <div class="box h80"></div>
  <div class="box h500"></div>
  <div class="box h300"></div>
  <div class="box h80"></div>
  <div class="box h300"></div>
</div>
</div>

Answer 1

<div class="content">
    <div class="under">
      <div>
          <div class="box h80"></div>
          <div class="box h80"></div>
          <div class="box h80"></div>   
          <div class="box h80"></div>
        </div>
        <div>
          <div class="box h300"></div>
          <div class="box h80"></div>
          <div class="box h80"></div>
        </div>
        <div>
          <div class="box h500"></div>
        </div>
        <div>
          <div class="box h300"></div>
          <div class="box h80"></div>
      </div>
      <div>
        <div class="box h300"></div>
      </div>
</div>

这将使css与您现在通过firefox和chrome测试过的css相同