如何在另一个div内放置三个div（一个垂直和两个水平）？

Question

我在另一个较大的图层中有三个div图层。 像这样：

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

假设蓝色部分是页眉和页脚。 我目前所拥有的是顶部黄色div旁边的绿色，但是绿色div的底部将第二个黄色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不再将底部的黄色向下推？ 任何帮助将不胜感激！

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都应确保#greenDiv和页脚不重叠。

Answer 2

您可以同时包裹黄色元素并将该元素浮动，而不是将黄色元素向左浮动，然后将绿色浮动到左侧。 在关闭整个容器之前添加一个clearfix，然后BOOM！ 您将黄色元素放在左侧，将绿色元素放在右侧，并且容器会延伸到更高的高度。

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>