我有一个多列屏幕,使用 CSS 显示一堆 div 框。我想弄清楚是否有一种方法可以先填充左列,然后再流入下一列。
您会看到我已将其设置为根据屏幕宽度显示 1、2 或 3 列,因此我从不想使用水平滚动条。如果您的显示器很小,则只会显示一两列,并且会正确显示一个垂直滚动条。如果您最大化屏幕,将出现 3 列,但 CSS 会将框“展开”到各列中,而不是填充第一列。
希望这是有道理的。任何帮助将不胜感激!
<style>
.Comment {
width: 320px;
height: calc(100vh - 40px);
background-color: burlywood;
}
.CommentBodySurround {
height: calc(100% - 40px);
overflow: auto;
}
.CommentBody {
}
@media screen and (min-width:700px) {
.Comment {
width: 650px;
}
.CommentBodySurround {
height: calc(100% - 40px);
}
.CommentBody {
column-count: 2;
width: 630px;
}
}
@media screen and (min-width:1020px) {
.Comment {
width: 960px;
}
.CommentBodySurround {
height: calc(100% - 40px);
}
.CommentBody {
column-count: 3;
width: 940px;
}
}
.box {
width: 290px;
margin: 3px;
border: 3px solid #345787;
border-radius: 12px;
display: inline-flex;
background-color: #F1F1F2;
height: 100px;
}
</style>
<div class="Comment">
<div style="height:30px; background-color:aquamarine">this is the top</div>
<div class="CommentBodySurround">
<div class="CommentBody">
<div class="box">
1
</div>
<div class="box">
2
</div>
<div class="box">
3
</div>
<div class="box">
4
</div>
<div class="box">
5
</div>
<div class="box">
6
</div>
<div class="box">
7
</div>
<div class="box">
8
</div>
<div class="box">
9
</div>
<div class="box">
10
</div>
</div>
</div>
</div>
I don't want the horizontal scroll bar if the screen is full, I want to scroll vertically
最佳答案
将 height: 100%
和 column-fill: auto
设置为 .CommentBody
.CommentBody {
column-count: 2;
column-fill: auto;
width: 630px;
height: 100%;
}
column-fill: auto
使其在传递到下一列之前填充每一列 https://developer.mozilla.org/en-US/docs/Web/CSS/column-fill
您需要将高度设置为 100%,以便它知道实际完成的时间。
关于html - 多列 - 首先填充左列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54723813/