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

Question

我想在另一个DIV（内容 - 主要）的底部放置一个DIV（ID eSharing）

这是DIV的CSS类（ID content-primary）

.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

Answer 1

不幸的是，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;
}

Answer 2

编辑：这是另一个选项，你有一个主要内容区域“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%;
}