如何将两个div标签左对齐和右对齐的最佳方法是什么？

Question

如何在网页上水平排列两个div标签并左右对齐？如果可能的话，我想要一个优雅的解决方案。

- Daniel Kivatinos

---

可能是重复的问题：没有使用浮动，如何将两个内联span元素左右对齐？ - Mr_Green

我发现这个答案很有用。 - Jesus is Lord

Answer 1

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

- Marcel Guzman

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 div）定位为绝对位置，因为它在html代码的自然流中已经处于所需位置。

- sepehr

---

这个解决方案也适用于IE7（被接受的答案不是：右侧div将向右浮动，但也会有1个换行）。 - firepol

如果您在包装器div下面放置一个div，它将取代包装器div的位置，这是一个不良的效果。 - Tony_Henrich

Answer 3

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

- Calvin

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

- Ronald P Mathews

Answer 5

使用填充标签，上面的浮动标签没有起作用，我使用了。

padding left:5px; 



padding left :30px

- JavaDragon

Answer 6

我使用了以下代码。音乐类型元素将从DJ元素结束的位置开始。

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

请原谅内联CSS。

- Sachin Kotian

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

- Post Impatica