Question

我有另外一个较大的div层。像这样：

Image 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>

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

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

你可以包裹两个黄色元素并浮动那个元素而不是黄色元素，然后将绿色浮动到左边。在关闭整个容器和BOOM之前添加一个clearfix！左边有黄色元素，右边是绿色，容器伸展到任何一个高度的高度。

Answer 3

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

<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>

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

3 个答案: