定位在一个大div的顶部和底部的一些按钮

我有以下几个要素：定位在一个大div的顶部和底部的一些按钮

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

...这需要显示的是这样的：

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

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

可以添加一个包装元素，但是我更喜欢如果我不需要。无论如何，我不知道如何使用包装元素：

来源

2012-04-04 cambraca

把按钮的“大”盒子里：

<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/

关键是要设置父位置：相对和孩子的位置是：绝对

来源

2012-04-04 00:41:59 tybro0103

'bottom：0px'有多可靠？它在所有的浏览器中都有效吗？ – cambraca 2012-04-04 00:42:35

@cambraca ...是的 – tybro0103 2012-04-04 00:43:22

不错，它有点作品。唯一缺少的是让所有这些标记之后的内容显示在事物（整个页面的页脚）之下。 “位置：绝对”让“＃大”没有占用空间......任何想法？ – cambraca 2012-04-04 00:48:57

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

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

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

来源

2012-04-04 00:39:48 JDD

如果大格的高度是不是一个常数，这是行不通的 – tybro0103 2012-04-04 00:46:20

它可以，如果button1 filldiv和button2在包装 – JDD 2012-04-04 01:00:54

定位在一个大div的顶部和底部的一些按钮

回答

相关问题