Чи можна замовляти стовпці CSS горизонтально, а не вертикально?

Ось мій код:

<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false"> <div class="snippet-code">

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

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

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

Це можливо? Як мені це зробити?

14
Це дійсно корисно
додано Автор Alan Yong, джерело
Це дійсно корисно
додано Автор Alan Yong, джерело
Це дійсно корисно
додано Автор Alan Yong, джерело
Ця публікація може бути дещо корисною: css-tricks.com/forums/discussion/23914/…
додано Автор rink.attendant.6, джерело

13 Відповіді

Ще простіше:<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

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

Ви можете застосувати float: left і очистити float: left кожні 4n + 1 елементи.

Ref:

: nth-child

6
додано
Це нормально, але не дозволяє використовувати різні елементи висоти.
додано Автор John Cullen, джерело
Я знайшов, що це рішення добре поширюється і на довгий
    , який мені потрібно було відобразити у двох горизонтальних колонках.
додано Автор mrcoulson, джерело

Ще простіше:<div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code">

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

Ви можете застосувати float: left і очистити float: left кожні 4n + 1 елементи.

Ref:

: nth-child

6
додано
Це нормально, але не дозволяє використовувати різні елементи висоти.
додано Автор John Cullen, джерело
Я знайшов, що це рішення добре поширюється і на довгий
    , який мені потрібно було відобразити у двох горизонтальних колонках.
додано Автор mrcoulson, джерело

Mansonry.js is the solution. Check this out http://masonry.desandro.com/ Also check out this demo. This is what you need i guess.. I am also trying to implement such thing :) http://tympanus.net/Development/GridLoadingEffects/index2.html

Наскільки я знаю, неможливо зробити це лише з CSS, що є сумним

1
додано

Mansonry.js is the solution. Check this out http://masonry.desandro.com/ Also check out this demo. This is what you need i guess.. I am also trying to implement such thing :) http://tympanus.net/Development/GridLoadingEffects/index2.html

Наскільки я знаю, неможливо зробити це лише з CSS, що є сумним

1
додано

перевірте мої прості коди під URL. https://github.com/JJ81/column-count можливо, ви можете мати те, що ви хочете.

1
додано
Добре включити відповідний код у відповідь, оскільки посилання не є доказом майбутнього.
додано Автор Patrick, джерело

перевірте мої прості коди під URL. https://github.com/JJ81/column-count можливо, ви можете мати те, що ви хочете.

1
додано
Добре включити відповідний код у відповідь, оскільки посилання не є доказом майбутнього.
додано Автор Patrick, джерело

перевірте мої прості коди під URL. https://github.com/JJ81/column-count можливо, ви можете мати те, що ви хочете.

1
додано
Добре включити відповідний код у відповідь, оскільки посилання не є доказом майбутнього.
додано Автор Patrick, джерело

Застосувати це:

.column { 
  width: 100px; 
  overflow:hidden;
} 
.column .inner {
  width:  20px; 
  float:left; 
  text-align:center;
}
1
додано
не могли б ви пояснити в тілі вашої відповіді?
додано Автор Aaron Hall, джерело

Застосувати це:

.column { 
  width: 100px; 
  overflow:hidden;
} 
.column .inner {
  width:  20px; 
  float:left; 
  text-align:center;
}
1
додано
не могли б ви пояснити в тілі вашої відповіді?
додано Автор Aaron Hall, джерело

Застосувати це:

.column { 
  width: 100px; 
  overflow:hidden;
} 
.column .inner {
  width:  20px; 
  float:left; 
  text-align:center;
}
1
додано
не могли б ви пояснити в тілі вашої відповіді?
додано Автор Aaron Hall, джерело

Насправді на цей раз я доклав певних зусиль. ігнорувати все з попереднього редагування

the display property's inline-blocks is probably what you want to use.

Here is a thorough guide on how to use it

А ось коротка демонстрація

li {
    width: 200px;
    display: inline-block;
}
0
додано
Я шукаю кращого рішення, і відповідь, яку ви дали мені, не є кращим рішенням. Мені потрібна робота в CMS, мені вона потрібна в динаміці.
додано Автор Alan Yong, джерело
це те, що я хочу.
додано Автор Alan Yong, джерело
Я так не думаю, тому що працюю в CMS.
додано Автор Alan Yong, джерело
@CallMeAhLun там я йду, це реальна відповідь на цей раз
додано Автор Stephan, джерело
@CallMeAhLun добре ви повинні були згадати, що я буду робити деякі дослідження для вас
додано Автор Stephan, джерело
@CallMeAhLun Ви не думаєте, що це буде працювати або що краще рішення існує? Перше здається більш імовірним, що робить мене сумним
додано Автор Stephan, джерело

Насправді на цей раз я доклав певних зусиль. ігнорувати все з попереднього редагування

the display property's inline-blocks is probably what you want to use.

Here is a thorough guide on how to use it

А ось коротка демонстрація

li {
    width: 200px;
    display: inline-block;
}
0
додано
це те, що я хочу.
додано Автор Alan Yong, джерело
Я шукаю кращого рішення, і відповідь, яку ви дали мені, не є кращим рішенням. Мені потрібна робота в CMS, мені вона потрібна в динаміці.
додано Автор Alan Yong, джерело
Я так не думаю, тому що працюю в CMS.
додано Автор Alan Yong, джерело
@CallMeAhLun там я йду, це реальна відповідь на цей раз
додано Автор Stephan, джерело
@CallMeAhLun добре ви повинні були згадати, що я буду робити деякі дослідження для вас
додано Автор Stephan, джерело
@CallMeAhLun Ви не думаєте, що це буде працювати або що краще рішення існує? Перше здається більш імовірним, що робить мене сумним
додано Автор Stephan, джерело

Насправді на цей раз я доклав певних зусиль. ігнорувати все з попереднього редагування

the display property's inline-blocks is probably what you want to use.

Here is a thorough guide on how to use it

А ось коротка демонстрація

li {
    width: 200px;
    display: inline-block;
}
0
додано
це те, що я хочу.
додано Автор Alan Yong, джерело
Я шукаю кращого рішення, і відповідь, яку ви дали мені, не є кращим рішенням. Мені потрібна робота в CMS, мені вона потрібна в динаміці.
додано Автор Alan Yong, джерело
Я так не думаю, тому що працюю в CMS.
додано Автор Alan Yong, джерело
@CallMeAhLun там я йду, це реальна відповідь на цей раз
додано Автор Stephan, джерело
@CallMeAhLun добре ви повинні були згадати, що я буду робити деякі дослідження для вас
додано Автор Stephan, джерело
@CallMeAhLun Ви не думаєте, що це буде працювати або що краще рішення існує? Перше здається більш імовірним, що робить мене сумним
додано Автор Stephan, джерело