Question

我刚刚开始学习CSS和Divs（从旧表中移过来），我正在试图找出如何在已经存在的绿色div之上放置另一个绿色div，其间的间距为20px 2个div，同时保持右侧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

这将使用左列父级来预先添加新内容。通过为标题提供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/

css - 如何在2列布局之外添加另一个div？

3 个答案: