web-dev-qa-db-ja.com

CSS列の方向フローを変更する

だから私はこのようなCSSを持っています：

#blogPosts{
    -moz-column-count: 3;
    -moz-column-gap: 10px;
    -webkit-column-count: 3;
    -webkit-column-gap: 10px;
    column-count: 3;
    column-gap: 10px;
    width: 100%; 
}

これにより、3つの列が完全に作成されますが、別の行を取得すると、順序は次のように垂直に出てくるようです。

1,3,5
2,4,6

私が望むものの代わりに：

1,2,3
4,5,6

重要！

私が必要とするもう1つの重要な属性は、すべての投稿の間に垂直方向にマージンを設定する必要があるということです。たとえば、2が1よりも長い場合に上の表を見ると、4の先頭は、height of 2 + yではなく、y以下1で始まります。

HTMLは次のようになります。

<div id="blogPosts">
    <div class="blog">Content</div>
    <div class="blog">Content</div>
    ...
</div>

これを修正するにはどうすればよいですか？

Javascript/jqueryを含むソリューションであっても、私はどんなソリューションにも満足しています

これ は私が求めているようなものです

enter image description here

htmlcsscss3flexboxcss-multicolumn-layout
38
maxisme

1つのアプローチは、 flexbox を使用することです

#blogPosts {
   display: flex;
   align-items: left;
   justify-content: left;
   flex-direction: row;
   flex-wrap: wrap;
   flex-flow: row wrap;
   align-content: flex-end;
}

http://jsfiddle.net/o59gc4hw/2/

13
Miguel Mota

さて、一見すると Masonry ライブラリを見るべきだと思いました。その後、石積みを検索すると、 石積みの柔軟なボックス および 石積みの列 も見つかる可能性があります。

列とフレキシブルボックスソリューションの両方の問題は、最初の項目が最初の列にあることです。

考えられる解決策を1つ見つけました。これは、アイテムの数が修正された場合にのみ機能します。

3列の9つのアイテムの場合：

#blogPosts {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-flex-wrap: wrap;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
}
.blog {
  color: white;
  width: 33%;
}
.blog:nth-child(3n+1) {
  -webkit-box-ordinal-group: 1;
  -webkit-order: 0;
      -ms-flex-order: 0;
          order: 0;
}
.blog:nth-child(3n+2) {
  -webkit-box-ordinal-group: 2;
  -webkit-order: 1;
      -ms-flex-order: 1;
          order: 1;
}
.blog:nth-child(3n+3) {
  -webkit-box-ordinal-group: 3;
  -webkit-order: 2;
      -ms-flex-order: 2;
          order: 2;
}
.blog:nth-child(n+7):nth-child(-n+9) {
  page-break-after: always;
  -webkit-break-after: always;
     -moz-break-after: always;
          break-after: always;
}
<div id="blogPosts">
    <div class="blog" style="background-color:blue; height:50px;">1</div>
    <div class="blog" style="background-color:red; height:75px;">2</div>
    <div class="blog" style="background-color:green; height:100px;">3</div>
    <div class="blog" style="background-color:black; height:30px;">4</div>
    <div class="blog" style="background-color:yellow; height:50px;">5</div>
    <div class="blog" style="background-color:purple; height:80px;">6</div>
    <div class="blog" style="background-color:pink; height:150px;">7</div>
    <div class="blog" style="background-color:orange; height:15px;">8</div>
    <div class="blog" style="background-color:gold; height:50px;">9</div>
</div>

上記では、orderプロパティとnth子セレクターを備えた柔軟なボックスを使用しています。最後に、次も参照してください。 css flexboxでラップする要素の指定方法

3
Bass Jobsen

これは単純なcssで実装できます。 HTML：

<div id="blogPosts">
<div class="blog">1Content</div>
<div class="blog">1Content</div>
<div class="blog">2Content</div>
</div>

CSS：「ブログ」クラスをインラインブロックにし、以下に示すように左にフロートします。

.blog {
     display: inline-block;
     width: 33.3%;
     float: left;
     margin-bottom: -999em;
     padding-bottom: 999em; 
}

#blogPosts{
    overflow: hidden;
}

これはあなたが持っていた高さの問題も修正します。 :)

0
Prashanth Jagadeesh

コラムの分離がcssコロンでどのように機能するかを誤解していると思います。 blogPostsクラスは、次のように表示されるように、3つの列にわたってコンテンツを可能な限り均等に分離しています。

1 3 5
2 4 6


しかし、もしあなたが

<div class="blogPosts">
    Content 1
</div>
<br>
<div class="blogPosts">
    Content 2
</div>
<br>
<div class="blogPosts">
     Content 3
</div>

次に、conentsは次のように表示されます。

1
2
3

ただし、これらのセクション内のコンテンツは3つの列に適合します。

0
Chacliff