CSS在两列上具有可变高度的div堆叠 [英] CSS stacking div with variable height on two columns

问题描述

因此，我在我的网站上处理用户的个人资料页面。我有一个小问题与CSS。

So I'm working the profile page of a user on my website. And I'm having a little problem with the CSS.

我的问题如下：我有四个具有固定宽度但有可变高度的div框，我想他们堆叠一个在另一个之上。

My problem is the following: I have four div boxes with a fixed width but with variable heights and I would like them to stack one on top of an other.

图片下方是我的问题的屏幕截图，标题为最新视频的div应该粘贴到具有基本信息标题的div。喜欢联系信息和最新照片。

The picture bellow is a screenshot of my issue, the div with the title "Latest videos" should be glued to the one with the "basic info" title. Like "contact info" and "Latest photo" are.

我的html看起来像这样：

My html looks something like this :

<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类如下所示：

The CSS class for info box looks like this :

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

如何使这项工作？

推荐答案

缺少嵌套您的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 。 这里是一个小提琴演示其使用。

you could try jQuery Masonry. Here's a fiddle demonstrating its use.

这篇关于CSS在两列上具有可变高度的div堆叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！