将一个div放置在另外两个div的上方

Question

我希望能像照片中一样放置3个div，其中第2个div必须粘着底部

这是我所做的： http://jsfiddle.net/GLHur/1/

- Sami Al-Subhi

---

由于我的CSS技能非常糟糕，我不会将其发布为答案。我会将其发布为如何不做的示例：http://jsfiddle.net/GLHur/4/ 尽管如此，它仍然有效！ - user657496

@rsplak，你的答案是正确的，但是OP在评论中提到他不想使用固定边距。 - Prashobh

Answer 1

试试这个：

http://jsfiddle.net/GLHur/18/

<div class="con">
    <div id="div3"></div>
    <div id="div1_2">
        <div id="div1"></div>
        <div id="div2"></div>
    </div>
</div>

#div3{height:100px;width:100px;border: solid 1px #000; display:inline-block; background:red;}

#div1{height:30px;width:100px;border: solid 1px #000; position:absolute; top:0; background:blue;}
#div2{height:20px;width:100px;border: solid 1px #000; position:absolute; bottom:0; background:green;}

#div1_2{display:inline-block; vertical-align:top;}


.con { position:relative; }​

- Lowkase

Answer 2

这个有效：

    #div3{height:100px;width:100px;border: solid 1px #000;
display:inline-block;}
    #div1{height:30px;width:100px;border: solid 1px #000;}
#div2{height:20px;width:100px;border: solid 1px #000; position: absolute; bottom: 0}
#div1_2{display:inline-block;vertical-align:top; position: relative; height: 100px;}

- user1477388

Answer 3

我建议您在这个基本定位中使用绝对定位：

<div id="content">
    <div id="div3"></div>
    <div id="div1"></div>
    <div id="div2"></div>
</div>

.

#content { position: relative; height: 100px; width: 220px; }

#div1{ position: absolute; top: 0; right: 0;   height:30px;  width:100px; background: blue; }
#div2{ position: absolute; bottom:0; right: 0; height:20px;  width:100px; background: green; }
#div3{ position: absolute; top: 0; left: 0;    height:100px; width:100px; background: red; }

jsFiddle

（注：此为IT相关内容）

- zessx

Answer 4

像这样的东西？

http://jsfiddle.net/GLHur/6/

---

或者说，一旦添加内容，高度是否会发生变化？

- Philip Kirkbride

---

div2的高度有时会不同，所以我不能使用固定的边距。 - Sami Al-Subhi

Answer 5

<div style="position: relative;">
    <div style="height: 100%;"> </div>
    <div style="position: absolute; right: 0px;"> </div>
    <div style="position: absolute; right: 0px; bottom: 0px;"> </div>
</div>

通过将外部div设置为'relative'，您可以使用绝对比例来定位内部的其他div。将第二个div对齐到右侧，将最后一个div对齐到右侧和底部。根据您的需求，您可能需要在样式中添加高度/最小高度。

- inVader