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

Answer 2

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

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

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

将一些按钮放在一个大div的顶部和底部

2 个答案: