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

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

Ответ 1

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

Ответ 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-кода.

Ответ 3

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

Ответ 4

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

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

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

Ответ 5

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

padding left:5px; 



padding left :30px

Ответ 6

Я использовал ниже. Элемент жанра начнет работу с конца элемента DJ,

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

извините inline css.

Ответ 7

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

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

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

Ответ 8

Вы можете использовать родительский тег div следующим образом:

<!doctype html>
<html>
<head>
<style>
.parent{
    text-align:center;
    }
.child{
    width:45%;
    display:inline-block;
    border:1px solid #cccccc;
}
</style>
</head>
<body>
    <div class="parent">
      <div class="child">First Element</div>
      <div class="child">Second Element</div>
    </div>
</body>
</html>