47

だから私はこのような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、 の先頭は+ではなく 14から始まります。yheight of 2y

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

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

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

javascript/jqueryを含むものであっても、どのようなソリューションにも満足しています

これは私が求めている種類のものです

ここに画像の説明を入力

4

4 に答える 4

11

最も近いのは使用することです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/

于 2015-05-15T16:58:56.017 に答える
0

列の分離が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>

次に、コンテンツは次のように表示されます。

1
2
3

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

于 2015-05-15T17:03:22.163 に答える
-2

これは単純な 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;
}

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

于 2015-05-18T15:52:19.167 に答える