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

Question

我有这些元素：

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

...需要像这样显示：

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

使用 CSS 使按钮与 big 的顶部和底部对齐的最干净的方法是什么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/

诀窍是设置父位置：相对和子位置：绝对

Answer 2

在左列中创建一个两列布局的大 div，在右列中创建按钮 1 div 填充 div 和按钮 2 div。

包装教程：http ://www.communitymx.com/content/article.cfm?cid=A8BBA

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