1

私はポートフォリオ Web サイト用のブロック ベースのインターフェイスを作成しようとしてきました。このブロックでは、各インライン ブロックが私の作品の 1 つを表し、クリックするとサイズが 2 倍に拡大し、より多くの情報が表示されます。

そのセットを使用してコーディングを開始しましたが、問題に遭遇しました。ブロックを展開すると、設定した css 設定に関係なく、常に次の行に空白が残ります (すでに数十を試しました)。そして、私が本当に望んでいるのは、次の項目で空白を埋めることです。

次の画像でよりよく説明されています。

ここに画像の説明を入力 これが実際の HTML です。

<div class="block">
    1
</div>
<div class="block">
    2
</div>
<div class="block big">
    3
</div>
<div class="block">
    4
</div>
<div class="block">
    5
</div>
<div class="block">
    6
</div>
<div class="block">
    7
</div>
<div class="block">
    8
</div>

そして、これはCSSです：

.block{
    width: 150px;
    height: 150px;
    border: 1px solid black;
    display: inline-block;
    margin: 5px;
}

.big{
    width: 320px;
    height: 320px;
}

私はすでに float 値で遊んでみましたが、ここでは運がありません。

4

1 に答える 1

0

まあ、純粋な CSS を使用していなくても、Masonry js ライブラリはそのトリックを実行できたようです (十分に文書化された優れた機能とメソッドのセットも付属しています)。

ここにリンクがあります：http://masonry.desandro.com

于 2013-03-11T01:54:05.343 に答える