我没有找到好的解决方案,所以向社区寻求帮助!
我有12个来自数据库的元素。
我想要将这些元素显示在3列中(就像有3页,每页4个元素),而不改变来自数据库的记录顺序。
为了响应式和简化最终代码,我不想为这3页新建容器。
我也不想设置容器的宽度。
以下是用于解释我的问题的代码:
body {
width: 900px;
}
.container {
display: flex;
flex-wrap: wrap;
}
.element {
background-color: red;
margin: 20px;
height: 100px;
width: 100px;
color: white;
font-size: 50px;
line-height: 100px;
text-align: center;
}
.container.good .element {
background-color: green;
}
<body>
<h1>Elements from bdd</h1>
<div class="container">
<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 class="element">10</div>
<div class="element">11</div>
<div class="element">12</div>
</div>
<h1>Expected 3 columns (with elements order above of course)</h1>
<div class="container good">
<div class="element">1</div>
<div class="element">2</div>
<div class="element">5</div>
<div class="element">6</div>
<div class="element">9</div>
<div class="element">10</div>
<div class="element">3</div>
<div class="element">4</div>
<div class="element">7</div>
<div class="element">8</div>
<div class="element">11</div>
<div class="element">12</div>
</div>
</body>
附加问题,是否有一种简单的方法来调整列和页面之间的边距
非常感谢您的帮助, Pedro