将一些按钮放在一个大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;
}

这是小提琴:http: //jsfiddle.net/Rcnbk/1/

诀窍是设置父位置:relative和children position:absolute