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

Question

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

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

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

所以基本上现在我有：

| |

我需要：

| |
|

说得通？:D

Answer 1

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

像这样的东西：

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

在你的 CSS

#bigcontainer{float:left;}

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

希望它足够清楚:)

Answer 2

也许是这样的：

div.left_box{
    float: left;
 }

div.right_box{
    float: right;
}

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

Answer 3

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

$(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/