-1

誰もがこのサイトhttp://pinterest.com/を知っていると思います。このようなサイトを作成したくありませんが、静的な幅と高さを常に変更可能な値で div の下に div を作成する別の目的があります。

ここで HTML コードを作成しました: http://jsbin.com/ihekiv

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
    div{
        margin: 5px;
    }
    .width-200{
        width: 200px;
    background-color: #FCF;
    }
    .float-left{
        float: left;
    }
</style>


</head>

<body>

    <div class="width-200 float-left color-01" style="height: 300px;">
    </div>

    <div class="width-200 float-left color-01" style="height: 250px;">
    </div>

    <div class="width-200 float-left color-01" style="height: 250px;">
    </div>

    <div class="width-200 float-left color-01" style="height: 250px;">
    </div>

    <div class="width-200 float-left color-01" style="height: 250px;">
    </div>

    <div class="width-200 float-left color-01" style="height: 250px;">
    </div>

    <div class="width-200 float-left color-01" style="height: 250px;">
    </div>

    <div class="width-200 float-left color-01" style="height: 250px;">
    </div>

    <div class="width-200 float-left color-01" style="height: 250px;">
    </div>

</body>
</html>

私の HTML コードでは、div 5 が div 1 の下にないことがはっきりとわかります。この div の 1 つが高さを変更する可能性があります いくつかの div が高さを変更する可能性があります div の高さが変更可能になったときにこれを行う方法を知りたいです。どなたか、やり方を教えてください。

4

2 に答える 2

3

可変数の列があるため、CSSはこれを実行できません。

代わりに、jQuery Masonry を使用してください: http://masonry.desandro.com/

フレームワークなしのバージョン、Vanilla Masonry もあります: http://vanilla-masonry.desandro.com/

于 2012-06-12T15:10:20.107 に答える
1

私ができる唯一のことは

body {
-webkit-column-count: 5;
-webkit-column-gap: 0px;
-webkit-column-width: 200px;
}

これは良い解決策ではなく、webtkit でのみサポートされています。

于 2012-06-12T17:59:58.307 に答える