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

Question

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

Answer 1

<div style="float: left;">Left Div</div>
<div style="float: right;">Right Div</div>

Answer 2

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

<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>

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

Answer 3

<style>
#div1, #div2 {
   float: left; /* or right */
}
</style>

Answer 4

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

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

<style>
.div_r{
float:right;
color:red;
}
</style>

Answer 5

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

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

<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>  

Answer 6

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

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

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

Answer 7

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

padding left:5px; 



padding left :30px