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

Question

我想把一个DIV (ID eSharing)放在另一个DIV (content-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的CSS类( ID eSharing)

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

截图链接http://i.stack.imgur.com/bMqXD.png

屏幕截图2

​

​

​

Answer 1

不幸的是，在一般情况下，CSS不具备相对于另一项定位项的能力。不过，看起来这个解决方案对你来说可能很简单。

您正在浮动一个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%;
}