如何在另一个 div 内部放置三个 div(一个垂直和两个水平)

Question

我在另一个更大的层里面有三个div层。像这样：

图片 http://dev.kgstiles.com/wp-content/uploads/2012/10/Stack.png

假设蓝色部分是页眉和页脚。我目前拥有的是顶部黄色div 旁边的绿色，但绿色div 的底部将第二个黄色div 向下推。我基本上有两个彼此相邻的div，然后在它们下面有一个div，但我想要更类似于图片的东西。我可能缺少什么，可以将绿色div放在两个黄色的旁边？

我会发布代码，因为每个div 中都有很多，但我有这样的东西：

<div class="container" >
<div id="greenDiv" style="float:right; padding-right:5%; padding-top:15px;">
</div>
<div id="topYellow" style="dsiplay:block;"> 
<-- Content -->
</div>
<div id="bottomYellow" style="dsiplay:block; float:left;"> 
<-- Content -->
</div>

我到底需要做什么来防止绿色div 将底部的黄色div 向下推？任何帮助将不胜感激！

Answer 1

我会完全避免使用浮点数。如果绿色div 具有固定宽度，您可以像这样设置它们的样式：

.container {
    position: relative; /* or anything besides static */
}
#greenDiv {
    position: absolute;
    top: 0;
    right: 0;
    width: 100px; 
}
#topYellow, #bottomYellow {
    margin-right: 100px; /* Plus more if you want a gap */
}

从本质上讲，这会将绿色div从容器的"流"中取出。黄色div 将简单地以正常流程放置，它们的边距可防止它们与绿色div 重叠。您也可以只浮动#greenDiv而不是#bottomYellow，而不是使用绝对定位。这样做的好处是，如果#greenDiv比两个黄色高，那么对页脚进行clear: both应该确保#greenDiv和页脚不会重叠。

Answer 2

您可以包装两个黄色元素并将该元素浮动，而不是黄色元素，然后向左浮动绿色。 在关闭整个容器之前添加清除修复，然后轰！ 你的黄色元素在左边，绿色在右边，容器伸展到一个更高的高度。

Answer 3

设置所有div float：right;第一个绿色分区;或：

<div class="container">
  <div id="letf_div" style="float:left">
     <div id="yelow1"></div>
     <div id="yelow2"></div>
  </div>
  <div id="right_div" style="float:left">
   <div id="green"></div>
  </div>
</div>