如何在另一个div的底部放置一个div？

如何解决如何在另一个div的底部放置一个div？

| 我想将一个DIV（ID eSharing）放置在另一个DIV（主要内容）的底部 这是DIV的CSS类（ID内容为主）

.layout-3 #content-primary {
    padding: 0 10px;
    width: 502px;
}

#content-primary.article {
    padding-bottom: 2.5em;
}

#content-primary {
    width: 501px;
}

#content-primary {
    clear: left;
    float: left;
    margin: 12px 0 0;
    padding: 0 10px;
    width: 500px;
}

这是DIV（ID eSharing）的CSS类

#eSharing {
    height: 230px;
    margin: 12px 0 0;
    overflow: auto;
    padding: 0 10px;
    position: relative;
}

Screeshot链接http://i.stack.imgur.com/bMqXD.png 屏幕截图2     

解决方法

不幸的是，在一般情况下，CSS无法将一个项目相对于另一个项目进行定位。看来解决方案对您来说可能很简单。 您要浮动一个div，并想在其下方放置另一个div？ 为什么不将两个div都放在一个外部div中，而将外部div浮动呢？这样，两个内部div将一个出现在另一个之上。 编辑：我已经说明了，但这是一个示例：

<div id=\"outer\">
    <div id=\"content-primary\">Your content</div>
    <div id=\"eSharing\">Other content</div>
</div>

对于CSS，不要浮动

content-primary

或

eSharing

。相反，请执行以下操作：

#outer {
    clear: left;
    float: left;
}

#content-primary {
    width: 501px; /* why? */
}

#content-primary {
    margin: 12px 0 0;
    padding: 0 10px;
    width: 500px;
}

#eSharing {
    height: 230px;
    margin: 12px 0 0;
    overflow: auto;
    padding: 0 10px;
}

    ,编辑：这是另一个选项，其中您有一个主要内容区域\“ a \”，侧边栏\“ b \”和\“ c \”和\“ d \”下面的两个相邻容器。 演示：http：//jsfiddle.net/L655v/ 还有一个在其下方具有主要内容区域“ a”，侧边栏“ b”和全尺寸内容区域“ c”的... http://jsfiddle.net/L655v/1/ （试图模仿您的屏幕快照可能暗示的意思）。 不确定要使用的是什么，但是这里有几个布局选项... 演示：http：//jsfiddle.net/aNqak/ 这是我在小提琴中使用的代码... HTML ...

<div id=\"a\">a</div>
<div id=\"b\">b</div>

<br /><br />

<div id=\"c\">
    c
    <div id=\"d\">d</div>
</div>

<br /><br />

<div id=\"e\">e</div>
<div id=\"f\">f</div>

CSS ...

#a {
    background-color: #999;
}
#b {
    background-color: #ddd;
}
#c {
    background-color: red;
    padding: 5px;
}
#d {
    background-color: pink;
}
#e {
    background-color: blue;
    float: left;
    width: 75%;
}
#f {
    background-color: green;
    float: right;
    width: 25%;
}