css - 将一个 div 定位在其他 div 下

Question

我目前正在学习如何分割主题，我希望在将 div 定位在其他 div 下时得到一些帮助。例如，我想将 div (box1-box3) 放置在 AdSales&Announcements div 下，并使它们居中。如果您注意到小提琴上的 div 没有居中，其他 div 也没有居中。提前致谢。

<div id="AdSales">

</div>
<div id="Announcements">

</div>

<div id="Box1"></div>

<div id="Box2"></div>

<div id="Box3"></div>

http://jsfiddle.net/edwinakatosh/YjLCe/embedded/result/

Answer 1

将三个 div 包装在一个包装器 div 中。您需要删除top:div 的样式，以便包装器可以完成其工作

HTML

</div>
<div id="Announcements"></div>


<div class="wrapper">
 <div id="Box1" class="box"></div>
 <div id="Box2" class="box"></div>
 <div id="Box3" class="box"></div>
</div>

CSS

#adSales, #Announcements{top:0}
.box{top:0; }
.wrapper{width:780px; margin:0 auto; overflow:hidden}

margin: 0 autocenter 不对齐浮动的 div。overflow: hidden重新计算浮动的子 div。width: 780px是包装子 div 的总宽度加上边距

Answer 2

http://jsfiddle.net/feitla/YjLCe/1/

环绕div它

<div id="AdSales"></div>
<div id="Announcements"></div>
<div id="container">
    <div id="Box1"></div>
    <div id="Box2"></div>
    <div id="Box3"></div>
</div>

给它一个width和position它

#container {
    margin:0 auto;
    position:relative;
    width:950px;
}