Левые, центральные и правые выровняющие 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