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

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

<p>установив свой контейнер div на <code>position:relative</code>, а дочерний div на <code>position:absolute</code>, вы можете установить абсолютное положение div в пределах контейнера.</p><p>это облегчает задачу, так как вы можете использовать <code>bottom:0px</code>, чтобы выровнять все вертикально по дну контейнера, а затем использовать левый/правый стиль для позиционирования вдоль горизонтальной оси.</p><p>я установил рабочий jsfiddle: <a href="http://jsfiddle.net/damien\_at\_sf/km7sq/5/">http://jsfiddle.net/damien\_at\_sf/km7sq/5/</a> и код следующий:</p><p>html:</p><pre><code><div id="container"> <div id="left">left</div> <div id="center">center</div> <div id="right">right</div> </div> </code></pre><p>css:</p><pre><code>#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; } </code></pre><p>примечание: для div "center" поле слева = 1/2 ширины div :)</p><p>надеюсь, это поможет :)</p>

<p>моя техника похожа на @ damien-at-sf:</p><p>я пытался строго продемонстрировать все требования, которые вы просили. </p><p> <a href="http://jsfiddle.net/wpfjw/"><strong><em>live demo</em></strong></a> </p><p><strong>html:</strong></p><pre><code><div id="container"> <div id="left"></div> <div id="mid"></div> <div id="right"></div> </div> </code></pre><p><strong>css:</strong></p><pre><code>#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 } </code></pre>

<p>чтобы сделать ваш центр div эластичным, вы можете сделать что-то вроде:</p><pre><code><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> </code></pre>

<p>дальнейшее улучшение первого ответа:</p><p>в «центр» div css необходимо добавить:</p><pre><code>text-align:center; </code></pre><p>в «правильный» div css вам нужно добавить:</p><pre><code>text-align:right; </code></pre><p>... для достижения идеального выравнивания по левому краю/центру.</p>

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