1

我在另一个较大的一个内有三个 div 层。像这样的东西：

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

可以说蓝色部分是页眉和页脚。我目前拥有的是顶部黄色 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 将底部的黄色 div 向下推？任何帮助将不胜感激！

4

3 回答 3

0

我会完全避免使用花车。如果绿色 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比两个黄色高，那么在页脚上做 aclear: both应该确保#greenDiv和页脚不重叠。

于 2012-10-09T02:34:13.267 回答
0

您可以包装两个黄色元素并将该元素浮动，而不是黄色元素，向左浮动，然后将绿色浮动到左侧。在关闭整个容器之前添加一个 clearfix，然后 BOOM！你的黄色元素在左边，绿色在右边，容器延伸到更高的集合的高度。

于 2012-10-09T02:52:38.507 回答
0

设置所有 div 浮动：对；第一个绿色 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>
于 2012-10-09T09:22:42.877 回答