web-dev-qa-db-ja.com

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

それは可能ですか？どうすればいいですか？

csscss-multicolumn-layoutcolumn-count
21
Alan Yong

さらに簡単です：

.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をクリアできます。

参照：

：n番目の子

14
Alex Char

Mansonry.jsがソリューションです。これをチェックしてください http://masonry.desandro.com/ このデモもチェックしてください。これは私が推測する必要があるものです..私もそのようなことを実装しようとしています：） http://tympanus.net/Development/GridLoadingEffects/index2.html

私の知る限り、CSSだけでこれを行う方法はありません。これは悲しいことです。

1
max bugaenko

今回は実際に少し努力しました。以前の編集からすべてを無視します

displayプロパティのinline-blocks はおそらくあなたが使いたいものです。

ここ はそれを使用する方法の完全なガイドです

そしてここに簡単なデモがあります

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