web-dev-qa-db-ja.com

2つのdivタグを左揃えおよび右揃えする最良の方法は何ですか？

Webページ上の2つのdivタグを水平方向に隣り合わせて右揃えおよび左揃えする最良の方法は何ですか？可能であれば、これを行うエレガントなソリューションが欲しいです。

htmlalignment
43
Daniel Kivatinos
<div style="float: left;">Left Div</div>
<div style="float: right;">Right Div</div>
86
Marcel Guzman

フローティングの代替方法として：

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

Htmlコードの自然な流れの中で望ましい位置にあるため、.left divを絶対位置に配置する必要はないことを考慮して（あなたの方向に応じて、これは.rightになります）。

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

[〜＃〜] css [〜＃〜]コードの数行でそれを行うことができます。 すべてのdivを右に並べて表示するに揃えることができます。

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

<style>
.div_r{
float:right;
color:red;
}
</style>
1
Ronald P Mathews

上記のフロートタグがうまくいかなかったパディングタグを使用して、私は使用しました

padding left:5px; 



padding left :30px
0
JavaDragon

以下を使用しました。ジャンル要素は、DJ要素が終わるところから始まります。

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

インラインcssをご容赦ください。

0
Sachin Kotian

このソリューションでは、右端にテキストとボタンが配置されています。

誰かが材料設計の答えを探しているなら：

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