3

我怎样才能改变这个网格布局，使第二行块位于其上方相应块的正下方，而不是形成一个全新的行？

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

纯 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

我不完全得到你想要的。当我将该代码放入测试文件时，我在浏览器中得到以下信息：在此处输入图像描述

对我来说，最后两个块看起来正好在同一列中的其他块下方。

一个问题可能是您将容器的宽度指定为屏幕的百分比，而将块的宽度指定为绝对值。

请发表评论，以便我可以更清楚地回答我的问题，这是我可以从您的问题中获得的所有信息。

于 2012-05-13T11:30:15.807 回答