我在另一个较大的 div 层中有三个 div 层。像这样:
Image 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 向下推?任何帮助将不胜感激!
最佳答案
我会完全避免使用 float 。如果绿色 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 重叠。您也可以只 float #greenDiv
而不是 #bottomYellow
而不是使用绝对定位。这样做的好处是,如果 #greenDiv
比两个黄色高,那么在页脚上做一个 clear: both
应该确保 #greenDiv
和页脚不重叠。
关于css - 如何在另一个 div 中放置三个 div(一个垂直和两个水平)?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12792023/