5

を使用して画像グリッドを作成していcolumn-countます。列を使用する際の問題は、テキストと同様に、画像でさえ壊れてしまうという事実です。したがって、画像の上半分を 1 つの列に配置し、下半分を 2 列目に配置できます。display: inline-block列の項目に追加することでこれを解決しました。それが私の現在の問題に
行き着きましたcolumn-count.3のアイテムと7つのアイテムでは、アイテムは[3] [3] [1]として表示されます。

[item]   [item]   [item]
[item]   [item]
[item]   [item]

[3][2][2]のように表示させたいです。質問は次のとおりです: div の 1 つを次の列に強制することはできますか?

HTML

<div id="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

CSS

#container {
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    width: 100%;
}
.item {
    background: red;
    /*-webkit-column-break-inside: avoid;
    -moz-column-break-inside:avoid;
    -moz-page-break-inside:avoid;
    page-break-inside: avoid;*/
    display: inline-block;
    height: 250px;
    margin-bottom: 20px;
    width: 100%;
}

jsfiddle

コメント アウトされている部分は、画像の破損を防ぐ 2 つ目の方法ですが、単純なdisplay:inline-block. それはまったく同じことをします。

高さを変えて使ってみましたclear。

更新
リクエストごとに、少しの背景情報 / ユース ケース。
画像グリッドは、レストランの簡単な Web サイトで使用されます。2 つの異なる機能を持つ複数のページで使用されます。機能 1 はフロント ページにあり、縦向きまたは横向きの 8 つの画像がさまざまなページへのリンクとして機能します。(8 つの画像が適切に分割されます [3][3][2]) 画像グリッドの 2 つ目の機能は、画像グリッドとしての機能です。たとえば、レストランには豊かな歴史があり、100 年近く前のイメージがあります。途中で画像が追加される可能性があります。3 つの div の代わりに列数を使用すると、画像の追加が簡単になり、レスポンシブにするのが非常に簡単になります。問題は、7 などの特定の量の画像では、画像が列全体で適切に分割されないことです。

Update 2
Masonry フレームワークを使用してみましたが、動作が遅くなりました。

4

4 に答える 4

2

他のすべてが失敗した場合は、ダミーの div を挿入できますが、提案するのは汚いと思います! （そして、それがあなたのセットアップで実行可能かどうかはわかりません）。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<style>

#container {
    column-count: 3;
    -moz-column-count: 3;
    -webkit-column-count: 3;
    width: 100%;
}
.item {
    background: red;
}

.item, .dummy {
    display: inline-block;
    height: 250px;
    margin-bottom: 20px;
    width: 100%;
}

</style>
</head>
<body>

<div id="container">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="dummy"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

</body>
</html>
于 2014-05-22T07:43:25.667 に答える