我有一个多列屏幕,显示一堆使用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%,以便知道它何时实际完成。