css - 在大 div 的顶部和底部放置一些按钮

Question

我有这些元素:

<div id="button1"></div>
<div id="button2"></div>
<div id="big"></div>

...需要这样显示:

|------------------|  |---------|
|                  |  | button1 |
|                  |  |---------|
|                  |
|       big        |
|                  |
|                  |  |---------|
|                  |  | button2 |
|------------------|  |---------|

使用 CSS 使按钮与大 div 的顶部和底部对齐的最简洁方法是什么？我希望能够调整大 div 的大小。此外，大 div 和按钮之间的空间以像素为单位是常量。

添加一个包装器元素是可以的，但如果不需要的话我更愿意。无论如何，我也不知道如何使用包装器元素来做到这一点:(

Answer 1

将按钮放在“大”框内:

<div id="big">
    <div id="button1"></div>
    <div id="button2"></div>
</div>

您可以像这样相对于它们的容器定位按钮:

#big {
    position:relative;
    width:400px; height:400px;
    overflow:visible;
} #button1, #button2 {
    width:100px; height:50px;
    position:absolute;
    right:-120px;
} #button1 {
    top:0px;
} #button2 {
    bottom:0px;
}

这是 fiddle : http://jsfiddle.net/Rcnbk/1/

诀窍是设置父position:relative和子position:absolute