Могу ли я заказать столбцы CSS по горизонтали, а не по вертикали?

вот мой код: 

.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

чего я хочу, так это:
1 2 3 4
5 6 7 8
9 10 11 12

это возможно? Как мне это сделать?

15
column-count css css-multicolumn-layout css3

5 ответов

еще проще:

.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>

вы можете применить float: left и понятно float: left каждого вида 4N+1 элементов.

Ref:

: nth-child

7

Mansonry.js-это решение. Проверьте этоhttp://masonry.desandro.com/ Также проверьте эту демонстрацию. Думаю, это то, что тебе нужно.. Я также пытаюсь реализовать такую вещь :) http://tympanus.net/Development/GridLoadingEffects/index2.html

насколько я знаю, нет способа сделать это только с CSS, который печален

1

на этот раз я действительно приложил некоторые усилия. игнорировать все из предыдущего редактирования

встроенные блоки свойства display - Это, наверное, то, что вы хотите использовать.

здесь это подробное руководство о том, как его использовать

и вот краткое демо

li {
    width: 200px;
    display: inline-block;
}
0

проверьте мои простые коды ниже url. https://github.com/JJ81/column-count может, ты получишь то, что хочешь.

-1

применить это:

.column { 
  width: 100px; 
  overflow:hidden;
} 
.column .inner {
  width:  20px; 
  float:left; 
  text-align:center;
}
-1