it-swarm-ru.tech

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

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

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

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

18
jrdioko

Установив свой контейнер 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 :)

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

20
Damien-Wright

Моя техника похожа на @ 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
}
4
thirtydot

Чтобы сделать ваш центр 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>
2
Babiker

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

В «центр» div CSS необходимо добавить:

text-align:center;

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

text-align:right;

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

1
FoulFoot

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

bottom: 0
0
Satya