如果有足够的空间，我如何将div列表拆分为两列？
如果有足够的空间，我如何将div列表拆分为两列？
提问于 2018-02-11 10:11:20
假设我有8个div。如果有足够的空间(通过min-width)，我希望它们像这样被分成两列：
1 5
2 6
3 7
4 8然而，如果我简单地设置display: inline-block，它们就会像这样被拆分，这不是我想要的：
1 2
3 4
5 6
7 8理想情况下，我正在寻找一种允许大小不相等的解决方案，所以如果只有6个，但#1和#2是双倍高度，结果将如下所示：
1 3
1 4
2 5
2 6这在纯CSS中是可能的吗？或者，如果不是，如何在JS中做到这一点？
回答 1
Stack Overflow用户
回答已采纳
发布于 2018-02-11 10:55:13
您可以使用CSS列来实现此行为：
html {
font-size: 62.5%;
}
.columnWrapper div {
display: inline-block;
width: 100%;
height: 10rem;
color: #fff;
text-align: center;
font-size: 5rem;
line-height: 10rem;
background-color: #4caf50;
margin-bottom: 0.5rem;
}
.columnWrapper {
-webkit-column-count: 2;
-moz-column-count: 2;
column-count: 2;
-webkit-column-gap: 0.5rem;
-moz-column-gap: 0.5rem;
column-gap: 0.5rem;
width: 20%;
margin: 0 auto;
}
@media screen and (max-width: 500px) {
.columnWrapper {
-webkit-column-count: 1;
-moz-column-count: 1;
column-count: 1;
}
}<div class="columnWrapper">
<div>1</div
><div>2</div
><div>3</div
><div>4</div
><div>5</div
><div>6</div
><div>7</div
><div>8</div>
</div>
或者参见this fiddle。
对于只有6个元素的情况，请参见this fiddle (相同的代码)。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/48727589
复制相关文章
相似问题
腾讯云开发者
