ポジショニング大きなdiv要素の上部と下部にいくつかのボタン

Question

私は、これらの要素を持っている

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

何クリーンな方法でありますCSSを使用してボタンを大文字の上と下に揃えますdiv？私は大きなdivのサイズを変更できるようにしたい。また、大きいdivとボタンの間のスペースはピクセル単位の定数です。

ラッパー要素を追加しても問題はありませんが、必要がない場合は好きです。とにかく、私はラッパー要素でそれを行う方法を知らないでしょう:(

Answer 1

「大きな」ボックス内のボタンを入れてくださいKEはそう：

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

トリックは、親の位置を設定することです：大きなdiv要素の高さが一定でない場合は、絶対

Answer 2

左の列に2列レイアウトbig divを作成し、ボタン1のdivフィラーdivとボタン2のdivを右の列に作成

ラッパーチュートリアル：あなたは自分のコンテナ李に対するボタンを配置することができます

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

：http://www.communitymx.com/content/article.cfm?cid=A8BBA

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