CSS堆叠div在两列上具有可变高度

Question

所以我正在我网站上的用户的个人资料页面上工作.而我对CSS有一点问题.

我的问题如下:我有四个具有固定宽度但具有可变高度的div盒子,我希望它们可以叠加在另一个上面.

下面的图片是我的问题的截图,标题为"最新视频"的div应该粘贴到具有"基本信息"标题的那个.像"联系信息"和"最新照片"一样.

我的HTML看起来像这样:

<div style="margin-left:-10px">
    <div class="infoBox" style="width:360px;  margin-left:9px">
        Content goes here for basic info
    </div>
    <div class="infoBox" style="width:360px;  margin-left:9px">
        Content goes here for contact info
    </div>
    <div class="infoBox" style="width:360px;  margin-left:9px">
        Content goes here for latest photos
    </div>
    <div class="infoBox" style="width:360px;  margin-left:9px">
        Content goes here for latest videos
    </div>
</div>

信息框的CSS类如下所示:

.infoBox {
    width: 100%;
    margin: -1px; 
    background-color:#37312d;
    padding:5px;
    border:#5b504a solid 1px;
    margin-bottom:9px;
    float:left;
}

我该怎么做才能做到这一点？

Answer 1

没有将div嵌套在列中:

<div class="left-column">
    <div class="infoBox">...</div>
    <div class="infoBox">...</div>
</div>
<div class="right-column">
    <div class="infoBox">...</div>
    <div class="infoBox">...</div>
</div>

你可以试试jQuery Masonry.这是展示其用途的小提琴.