定位在一個大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的頂部和底部的一些按鈕

回答

相關問題