css - 如何在具有 2 列布局的 div 上方添加另一个 div？答案

【问题标题】：css - how to add another div above one with 2 colums layout?css - 如何在具有 2 列布局的 div 上方添加另一个 div？
【发布时间】：2025-12-17 00:00:01
【问题描述】：

这是我的小提琴： http://jsfiddle.net/LLFpp/

我刚刚开始学习 CSS 和 Divs（从旧表移过来），我试图弄清楚如何将另一个绿色 div 放置在已经存在的绿色 div 之上，之间有 20px 的空间2 个 div，同时将右侧 div 保留在原位。

我尝试像处理表格一样进行操作，但随后它搞砸了整个布局，将右侧的 div 向下推。

所以基本上现在我有了：

| |

我需要：

| |
|

有意义吗？ :D

【问题讨论】：

标签： css html

【解决方案1】：

您需要为两个“绿色” div 提供一个容器，并将其左对齐。

类似这样的：

<div id="bigcontainer">
    <green div 1>
    <green div 2>
</div>
<div id="menu">
 <!--whatever-->
</div>

在您的 CSS 中

#bigcontainer{float:left;}

然后，您可以在不影响主要设计的情况下使用“绿色 div”做任何您想做的事情。

希望它足够清楚:)

【讨论】：

刚刚尝试过，由于某种原因，它会将右侧的框推到页面下方:(
可能是宽度有问题，给“bigcontainer”设置一个固定宽度并左对齐，这样菜单就可以留在右边了

【解决方案2】：

可能是这样的：

div.left_box{
    float: left;
 }

div.right_box{
    float: right;
}

然后将你的两个绿色 div 部分放在 left_box div 中。

【讨论】：

【解决方案3】：

这将使用左列父级添加新内容。通过给 title 一个 id 然后调整 el 变量中的 id ，仍然可以保留绿色背景并位于标题下。这真的取决于变化的内容会是什么样子。

$(function(){
 var el = document.getElementById("main");
 var parent = el.parentNode;
 var newContents = document.createElement("div");
 newContents.innerHTML = "<p>New Content</p>";
 newContents.style = "margin-bottom: 20px";
 parent.insertBefore(newContents,el);
});

http://jsfiddle.net/LLFpp/10/

【讨论】：