Question

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

我的问题如下：我有四个具有固定宽度但具有可变高度的div框，我希望它们将一个堆叠在另一个上面。

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

My problem

我的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

缺少nesting your divs in columns：

<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。 Here's a fiddle证明了它的用途。

Answer 2

您可以将这些框放在like so列中。这是一个非常基本的网格系统，但它显示了基本的想法：你将你的盒子堆叠在形成列的包装div中。

如果您要在整个网站上重复此模式，则可能需要使用更正式的网格系统。只需搜索“css网格系统”即可找到许多例子。

Answer 3

我建议您将内容分为两列：

HTML：

<div style="margin-left:-10px">
    <div class="column">
        <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 latest videos
        </div>
    </div>
    <div class="column">
        <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>
</div>

并在你的CSS中添加：

.column{float:left; width:50%;}

更新：如果您使用此解决方案，则不需要浮动列中的框

Answer 4

我发现这个问题的最佳解决方案是使用类.odd和.even或.left和.right标记每个帖子然后简单地向左浮动奇数/左侧帖子并向右浮动偶数/右侧帖子。请注意，只有当帖子的宽度加到其容器的宽度时，这才能直观地起作用。然后，为了使这个工作在各种屏幕尺寸上，只需添加一个@media查询来改变偶数/右边柱子上的浮动，使其留在小于双列容器宽度的屏幕上。

Answer 5

您可以尝试使用此代码

#bottom{
    width: ???px;
    height: ???px;
    background-color: black;
}
#top{
    width:???px;
    height:???px;
    background-color:red;
    z-index: 999;
}


<div id="bottom">
    <div>......</div>
  <div id="top">......</div>
</div>

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

5 个答案: