Левые, центральные и правые выровняющие div на дне той же линии

У меня есть три div, которые я хотел бы отображать на одной строке. Каждый из трех имеет разную ширину и высоту, и они не являются прямым текстом. Я бы хотел выровнять один (все влево), выровнять по правому краю (все вправо) и центрировать третью (в середине содержащего div, вся страница в этом случае).

Кроме того, я хотел бы, чтобы три divs были выровнены по вертикали в нижней части содержащего div. Решение я по вертикали выровняет их в верхней части содержащего div.

Каков наилучший способ справиться с этим?

Ответ 1

Установив div вашего контейнера в position:relative, а дочерние divs на position:absolute, вы можете полностью поместить div в пределы контейнера.

Это упростит, так как вы можете использовать bottom:0px для выравнивания по вертикали в нижней части контейнера, а затем использовать стиль "влево/вправо" в положение вдоль горизонтальной оси.

Я установил рабочий jsFiddle: http://jsfiddle.net/Damien_at_SF/KM7sQ/5/ и следующий код:

HTML:

<div id="container">
    <div id="left">left</div>
    <div id="center">center</div>
    <div id="right">right</div>    
</div>

CSS

#container {
    position:relative;
    height:400px;
    width:100%;
    border:thick solid black;
}
#container div {
    background:grey;
    width:200px;
}
#left {
    position:absolute;
    left:0px;
    bottom:0px;
}
#center {
    position:absolute;
    left:50%;
    margin-left:-100px;
    bottom:0px;
}
#right {
    position:absolute;
    right:0px;
    bottom:0px;
}

Примечание: для "центра" div, margin-left = 1/2 ширина div:)

Надеюсь, что помогает:)

Ответ 2

Моя техника похожа на @Damien-at-SF:

Я попытался строго продемонстрировать все требования, которые вы просили.

Live Demo

HTML:

<div id="container">

    <div id="left"></div>
    <div id="mid"></div>
    <div id="right"></div>

</div>

CSS

#container {
    position: relative;
    height: 400px;
    width: 80%;
    min-width: 400px;
    margin: 0 auto;

    background: #ccc
}
#left, #right, #mid {
    position: absolute;
    bottom: 0;
}
#left {
    left: 0;
    width: 80px;
    height: 200px;

    background: red
}
#right {
    right: 0;
    width: 120px;
    height: 170px;

    background: blue
}

#mid {
    left:50%;

    margin-left: -80px;
    width: 160px;
    height: 300px;

    background: #f39
}

Ответ 3

Чтобы сделать ваш центр упругим, вы можете сделать что-то вроде:

<div style="display:table; width:500px;">
  <div style="display:table-row;">
    <div style="display:table-cell; width:50px;"></div>
    <div style="display:table-cell;"></div>
    <div style="display:table-cell; width:50px;"></div>
  </div>
</div>

Ответ 4

Дальнейшее улучшение первого ответа:

В "центре" div CSS вам нужно добавить:

text-align:center;

В "правильном" div CSS вам нужно добавить:

text-align:right;

... идеально подходит для выравнивания влево/в центре/вправо.

Ответ 5

Задайте position: relative в содержащем div, установите position: relative на ваши 3 divs и установите для атрибута bottom 3 divs на 0:

bottom: 0