左对齐和右对齐两个 div 标签的最佳方法是什么？答案

【问题标题】：What is the best way to left align and right align two div tags?左对齐和右对齐两个 div 标签的最佳方法是什么？
【发布时间】：2010-10-18 04:43:14
【问题描述】：

在水平相邻的网页上右对齐和左对齐两个 div 标签的最佳方法是什么？如果可能的话，我想要一个优雅的解决方案。

【问题讨论】：

What is the best way to align two inline span elements to left and right without float?的可能重复

标签： html alignment

【解决方案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 代码自然流中的所需位置。

【讨论】：

此解决方案也适用于 IE7（接受的答案不是：正确的 div 会向右浮动，但也会出现 1 个故障）
如果你在wrapper div下面有一个div，它会代替wrapper div，效果不好。

【解决方案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】：

使用填充标签上面的浮动标签没用，我用过

padding left:5px; 



padding left :30px

【讨论】：

【解决方案6】：

我使用了以下内容。流派元素将从 DJ 元素结束的地方开始，

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

请原谅内联 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>

【讨论】：