我的容器中有未知数量的子项目:
<div class="container">
<div class="child">Item 1</div>
<div class="child">Item 2</div>
<div class="child">Item 3</div>
<div class="child">Item 4</div>
<div class="child">Item 5…</div>
</div>
我想将这些项目堆叠成两列,以便它们出现:
Item 1 Item 4
Item 2 Item 5
Item 3
在不知道网格行数的情况下,我无法弄清楚如何使用 CSS 网格来实现此操作,或者在没有在容器上设置显式高度的情况下使用 Flexbox 来实现此操作。
有人可以建议一种方法吗?
如果有使用 Flexbox 和网格的义务,那么据我所知,你需要容器的高度(使用 JavaScript 或你提到的 CSS 自定义属性动态计算它)。
我可以想到一种纯粹在 CSS 中实现此目的的方法,无需任何动态计算或提前知道高度,那就是使用
column-count
属性。有了这个,您无需担心传入的项目数量。如果您正在寻找 Flexbox 或网格之外的解决方案,请在此处分享我的解决方案以供参考:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.container {
column-count: 2; /* speciifes that the content inside the container should be divided into two columns */
column-gap: 1rem;
width: 100%;
}
.child {
display: inline-block;
width: 100%;
box-sizing: border-box;
break-inside: avoid; /* ensures that each child element stays within a single column */
padding: 0.5rem;
}
</style>
</head>
<body>
<div class="container">
<div class="child">Item 1</div>
<div class="child">Item 2</div>
<div class="child">Item 3</div>
<div class="child">Item 4</div>
<div class="child">Item 5</div>
<div class="child">Item 6</div>
<div class="child">Item 7</div>
<div class="child">Item 8</div>
<div class="child">Item 9</div>
<div class="child">Item 10</div>
<div class="child">Item 11</div>
<div class="child">Item 12</div>
<div class="child">Item 13</div>
<div class="child">So on...</div>
</div>
</body>
</html>
试试这个:
const container = document.getElementById('container');
let itemCount = 0;
addEventListener('click', function() {
itemCount++;
const newItem = document.createElement('div');
newItem.className = 'child';
newItem.textContent = 'Item ' + itemCount;
container.appendChild(newItem);
});
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 10px; /* Add spacing between items */
}
.child {
padding: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="w.css">
</head>
<body>
<div class="container">
<div class="child">Item 1</div>
<div class="child">Item 2</div>
<div class="child">Item 3</div>
<div class="child">Item 4</div>
<div class="child">Item 5</div>
<div class="child">Item 5</div>
<div class="child">Item 5</div>
<div class="child">Item 5</div>
<div class="child">Item 5</div>
<div class="child">Item 5</div>
<div class="child">Item 5</div>
<div class="child">Item 5</div>
<div class="child">Item 5</div>
</div>
<script src="w.js"></script>
</body>
</html>
但我也会使用Javascript