Как лучше всего выровнять два тега div по левому и правому краю?

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


html alignment
person Daniel Kivatinos    schedule 07.04.2009    source источник
comment
Возможный дубликат Как лучше всего выровнять два встроенных элемента span по левому и правому краю без поплавка?   -  person Mr_Green    schedule 31.01.2017

Ответы (5)


arrow_upward
36
arrow_downward

Как альтернативный способ плавания:

<style>
    .wrapper{position:relative;}
    .right,.left{width:50%; position:absolute;}
    .right{right:0;}
    .left{left:0;}
</style>
...
<div class="wrapper">
    <div class="left"></div>
    <div class="right"></div>
</div>

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

person sepehr    schedule 07.04.2009
comment
это решение работает также с IE7 (принятого ответа нет: правый div будет перемещен вправо, но также 1 сломается) - person firepol; 01.12.2011
comment
Если у вас есть div ниже div-оболочки, он займет место div-оболочки, что является нежелательным эффектом. - person Tony_Henrich; 20.09.2012

arrow_upward
1
arrow_downward

Вы можете сделать это с помощью нескольких строк кода CSS. Вы можете выровнять все div, которые вы хотите разместить рядом друг с другом, справа.

<div class="div_r">First Element</div>
<div class="div_r">Second Element</div>

<style>
.div_r{
float:right;
color:red;
}
</style>
person Ron    schedule 05.04.2015

arrow_upward
1
arrow_downward

используйте теги заполнения, указанные выше теги с плавающей запятой не сработали, я использовал

padding left:5px; 



padding left :30px
person JavaDragon    schedule 20.10.2015

arrow_upward
0
arrow_downward

Я использовал нижеприведенный. Элемент жанра начинается там, где заканчивается элемент DJ,

<div>
<div style="width:50%; float:left">DJ</div>
<div>genre</div>
</div>

простите за встроенный CSS.

person Sachin Kotian    schedule 18.12.2015

arrow_upward
0
arrow_downward

В этом решении текст с выравниванием по левому краю и кнопка справа.

Если кто-то ищет ответ в стиле материального дизайна:

<div layout="column" layout-align="start start">
 <div layout="row" style="width:100%">
    <div flex="grow">Left Aligned text</div>
    <md-button aria-label="help" ng-click="showHelpDialog()">
      <md-icon md-svg-icon="help"></md-icon>
    </md-button>
 </div>
</div>
person Post Impatica    schedule 21.03.2016