Positioning некоторые кнопки на верхней и нижней части большой DIV

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> 

Вы можете расположить кнопки относительно их контейнера Li ка так:

#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 ДИВА Наполнитель сОн и кнопку 2 DIV в правой колонке.

Упаковочный учебник: http://www.communitymx.com/content/article.cfm?cid=A8BBA

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