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

Ответ 1

Еще проще:

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

Ответ 2

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

Насколько я знаю, нет способа сделать это с помощью CSS, только грустного

Ответ 3

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

свойство display inline-blocks, вероятно, вы хотите использовать.

Здесь - подробное руководство по его использованию.

И вот краткая демонстрация

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

Ответ 4

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

Ответ 5

Примените это:

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