我可以让我的CSS列水平而不是垂直?不使用浮动或定位

Question

不使用位置和浮动，如果有其他方法请帮助我这是Html代码

<div class="column-content">
<div class="single-column" style="height: 220px"></div>
<div class="single-column" style="height: 160px"></div>
<div class="single-column" style="height: 250px"></div>
<div class="single-column" style="height: 150px"></div>
<div class="single-column" style="height: 180px"></div>
<div class="single-column" style="height: 120px"></div>
<div class="single-column" style="height: 140px"></div>
<div class="single-column" style="height: 190px"></div>
</div>

这里是Css代码

.column-content{
column-count: 3;
}
.single-column{
background: purple;
width: 100%;
display: inline-block;
margin-bottom: 20px;
}

Answer 1

扩展我的评论;
你需要使用inline-flex和宽度组合来达到你想要的结果;

.column-content {
width: 100%;
min-width: 100%;
}
.single-column {
width:33%;
min-width:33%;
display: inline-flex;
height: 100px;
min-height: 100px;
background-color: hotpink;
}

这可以在我的JSFiddle中测试，尽管你的高度使它偏离