我可以水平而不是垂直排列CSS列吗？ [英] Can I order my CSS columns horizontally instead of vertically?

问题描述

这是我的代码：

.column {
    column-count: 4;
    column-gap: 10px;
    -moz-column-count: 4;
    -moz-column-gap: 10px;
    -webkit-column-count: 4;
    -webkit-column-gap: 10px;
}

<div class="column">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
    <div class="inner">4</div>
    <div class="inner">5</div>
    <div class="inner">6</div>
    <div class="inner">7</div>
    <div class="inner">8</div>
    <div class="inner">9</div>
    <div class="inner">10</div>
    <div class="inner">11</div>
    <div class="inner">12</div>
</div>

结果是：

1 4 7 10

2 5 8 11

3 6 9 12

The result is:
1 4 7 10
2 5 8 11
3 6 9 12

我想要的是：

1 2 3 4

5 6 7 8

9 10 11 12

What I want is:
1 2 3 4
5 6 7 8
9 10 11 12

有可能吗？我应该如何做？

Is that possible? How should I make it?

推荐答案

更容易：

.inner:nth-child(4n+1) {
    clear: left;
}

.inner {
    float: left;
    margin: 5px;
}

<div class="column">
    <div class="inner">1</div>
    <div class="inner">2</div>
    <div class="inner">3</div>
    <div class="inner">4</div>
    <div class="inner">5</div>
    <div class="inner">6</div>
    <div class="inner">7</div>
    <div class="inner">8</div>
    <div class="inner">9</div>
    <div class="inner">10</div>
    <div class="inner">11</div>
    <div class="inner">12</div>
</div>

您可以每4n + 1个元素应用 float：left 并清除 float：left 。

You can apply float: left and clear float: left every 4n+1 elements.

引用：

：nth-​​child

这篇关于我可以水平而不是垂直排列CSS列吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！