3

まったく新しい行を形成するのではなく、ブロックの 2 番目の行がその上の対応するブロックのすぐ下に配置されるように、このグリッド レイアウトを変更するにはどうすればよいでしょうか?

http://jsfiddle.net/AndyMP/wSvrN/

body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
#container {
    position: absolute;
    width: 60%;
    left: 50%;
    margin-left: -30%;
    border: 1px dotted #333;
    padding: 20px;
}
.box1 {
    position: relative;
    float: left;
    width: 100px;
    height: 150px;
    background: #666;
    margin: 0 15px 15px 0;
}
.box2 {
    position: relative;
    float: left;
    width: 100px;
    height: 200px;
    background: #666;
    margin: 0 15px 15px 0;
}
.box3 {
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    background: #666;
    margin: 0 15px 15px 0;
}

HTML

<div id="container">

    <div class="box1"></div>
    <div class="box3"></div>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <div class="box2"></div>
    <div class="box1"></div>
    <div class="box1"></div>
    <div class="box3"></div>
    <div class="box2"></div>

</div>
4

3 に答える 3

5

Pure CSS ではこれを実現できません。これにはhttp://masonry.desandro.com/を使用する必要があります。

于 2012-05-13T11:55:42.280 に答える
2

こんな感じですか？ http://jsfiddle.net/LtLrx/

CSS:

body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
}
#container {
    position: absolute;
    width: 60%;
    left: 50%;
    margin-left: -30%;
    border: 1px dotted #333;
    padding: 20px;
}
.contleft
{
    float: left;
    margin-right: 15px;
    width: 30%;
    position: relative;
    height: 100%;
}
.contmiddle
{
    float: left;
    margin-right: 15px;
    width: 30%;
    position: relative;
    height: 100%;
}
.contright
{
    float: left;
    width: 30%;
    position: relative;
    height: 100%;
}
.box1 {
    position: relative;
    float: left;
    width: 100px;
    height: 150px;
    background: #666;
    margin: 0 15px 15px 0;
}
.box2 {
    position: relative;
    float: left;
    width: 100px;
    height: 200px;
    background: #666;
    margin: 0 15px 15px 0;
}
.box3 {
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    background: #666;
    margin: 0 15px 15px 0;
}

HTML:

<div id="container">

    <div class="contleft">
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box1"></div>
    </div>
    <div class="contmiddle">
        <div class="box2"></div>
        <div class="box1"></div>
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
    <div class="contright">
        <div class="box3"></div>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box1"></div>
    </div>
</div>
于 2012-05-13T11:49:31.540 に答える
1

私はあなたが望むものを正確には得ません。そのコードをテスト ファイルに入れると、ブラウザーに次のように表示されます。ここに画像の説明を入力

私には、最後の 2 つのブロックが同じ列の他のブロックの真下にあるように見えます。

問題は、コンテナの幅を画面のパーセンテージとして指定し、ブロックの幅を絶対値として指定している可能性があります。

コメントしてください。回答をより明確にすることができます。これが、あなたの質問から作成できるすべての情報です。

于 2012-05-13T11:30:15.807 に答える