我试图创建一个布局,其中元素垂直排列使用纯CSS。如果有2列和10个项目,则应在第一列中显示前五个元素,并在第二列中显示后五个元素。如果有11个元素,布局应该首先在第一列显示6个元素,在第二列显示5个元素。有没有一种方法可以只使用CSS来实现这一点,而不需要求助于JavaScript或其他脚本语言?
我尝试过使用各种CSS属性,如flex、grid和column-count,但我找不到一个基于元素数量动态工作的解决方案。
div {
border: 1px dotted black;
}
.grid-2 {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: max-content;
}
<div class="grid-2">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
<div class="item">10</div>
</div>
3条答案
按热度按时间1hdlvixo1#
这看起来像是
column-count
的工作,除非我误解了这个问题:如果你有10个项目,将有两个相等的列,但增加一个额外的项目意味着1-6将在第一列。
eanckbw92#
solutionralph.m给我的正是我要找的。不幸的是,在我参与的项目中有太多的遗留代码,任何通过CSS进行的更改都会产生难以处理的问题。
我选择了JS。我创建了一个函数,它替换数组中的所有元素,以这样的方式排列索引,以便数组元素按列排列。
这可能不是最优雅的解决方案,但也许对某人有用。
下面是应用函数之前的代码:
下面是应用函数
arrangeInColumns()
后的代码:jckbn6z73#
CSS将帮助你
for large display
for mbl screen display