如何在纯CSS中使用动态列垂直排列元素?

wgx48brx  于 2023-10-21  发布在  其他
关注(0)|答案(3)|浏览(94)

我试图创建一个布局,其中元素垂直排列使用纯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>
1hdlvixo

1hdlvixo1#

这看起来像是column-count的工作,除非我误解了这个问题:

div {border: 1px dotted black;}

.grid-2 {
  column-count: 2;
}
<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 class="item">11</div>
</div>

如果你有10个项目,将有两个相等的列,但增加一个额外的项目意味着1-6将在第一列。

eanckbw9

eanckbw92#

solutionralph.m给我的正是我要找的。不幸的是,在我参与的项目中有太多的遗留代码,任何通过CSS进行的更改都会产生难以处理的问题。
我选择了JS。我创建了一个函数,它替换数组中的所有元素,以这样的方式排列索引,以便数组元素按列排列。
这可能不是最优雅的解决方案,但也许对某人有用。
下面是应用函数之前的代码:

.elements {
  width: 100%;
}

.element {
  width: 25%;
  box-sizing: border-box;
  border: 1px solid #000;
  text-align: center;
  margin: 10px 0;
  padding: 10px;
  float: left;
}
<div class="elements">
  <div class="element">1</div>
  <div class="element">2</div>
  <div class="element">3</div>
  <div class="element">4</div>
  <div class="element">5</div>
  <div class="element">6</div>
  <div class="element">7</div>
  <div class="element">8</div>
  <div class="element">9</div>
</div>

下面是应用函数arrangeInColumns()后的代码:

const numberOfColumns = 4;
const elements = document.querySelectorAll('.element');

var arrangedInColumns = arrangeInColumns(elements, numberOfColumns);
var elementsContainer = document.querySelector('.elements');

elementsContainer.innerHTML = '';
for (let k = 0; k < arrangedInColumns.length; k++) {
    elementsContainer.appendChild(arrangedInColumns[k]);
}

function arrangeInColumns(elements, numberOfColumns) {
    const rows = Math.floor(elements.length / numberOfColumns);
    const extraItems = elements.length % numberOfColumns;

    const tableHeight = rows + extraItems;

    const newArrayForElements = [];

    let currentIndex = 0;

    for (let i = 0; i < tableHeight; i++) {
        const rowOffset = i;
        let valuesToAdd = 0;

        for (let j = 0; j < numberOfColumns; j++) {
            if (currentIndex === elements.length) break;

            const newIndex = rowOffset + valuesToAdd;
            newArrayForElements[currentIndex] = elements[newIndex];

            valuesToAdd += rows;
            if (extraItems > j) {
                valuesToAdd += 1;
            }

            currentIndex++;
        }
    }
    return newArrayForElements;
}
.elements {
  width: 100%;
}

.element {
  width: 25%;
  box-sizing: border-box;
  border: 1px solid #000;
  text-align: center;
  margin: 10px 0;
  padding: 10px;
  float: left;
}
<div class="elements">
  <div class="element">1</div>
  <div class="element">2</div>
  <div class="element">3</div>
  <div class="element">4</div>
  <div class="element">5</div>
  <div class="element">6</div>
  <div class="element">7</div>
  <div class="element">8</div>
  <div class="element">9</div>
</div>
jckbn6z7

jckbn6z73#

div {
  border: 1px dotted black;
}
.grid-2 {
  column-count: 2;
  max-width: none;
  column-gap: 0; 
}
.item {
  break-inside: avoid;
  width: 100%;
  box-sizing: border-box;
}

@media screen and (max-width: 600px) {
  .grid-2 {
column-count: 1;
  }
}

CSS将帮助你
for large display
for mbl screen display

相关问题