Выравнивание по левому краю, по центру и по правому краю в нижней части той же строки - PullRequest
Новая
       55

Выравнивание по левому краю, по центру и по правому краю в нижней части той же строки

18 голосов
/ 16 февраля 2011

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

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

Как лучше всего справиться с этим?

Ответы [ 5 ]

20 голосов
/ 16 февраля 2011

Установив для div контейнера position:relative, а для дочернего элемента div 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 "center" поле слева = 1/2 ширины div:)

Надеюсь, это поможет:)

4 голосов
/ 16 февраля 2011

Моя техника похожа на @ 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
}
2 голосов
/ 16 февраля 2011

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

<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>
1 голос
/ 16 февраля 2012

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

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

text-align:center;

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

text-align:right;

... для идеального выравнивания по левому / центральному / правому краям.

0 голосов
/ 16 февраля 2011

Установите position: relative для содержащего элемента, установите position: relative для ваших 3-х элементов и установите атрибут bottom для 3-х элементов равным 0: 

bottom: 0
...