Webページ上の2つのdivタグを水平方向に隣り合わせて右揃えおよび左揃えする最良の方法は何ですか?可能であれば、これを行うエレガントなソリューションが欲しいです。
<div style="float: left;">Left Div</div>
<div style="float: right;">Right Div</div>
フローティングの代替方法として:
<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になります)。
<style>
#div1, #div2 {
float: left; /* or right */
}
</style>
[〜#〜] css [〜#〜]コードの数行でそれを行うことができます。 すべてのdivを右に並べて表示するに揃えることができます。
<div class="div_r">First Element</div>
<div class="div_r">Second Element</div>
<style>
.div_r{
float:right;
color:red;
}
</style>
上記のフロートタグがうまくいかなかったパディングタグを使用して、私は使用しました
padding left:5px;
padding left :30px
以下を使用しました。ジャンル要素は、DJ要素が終わるところから始まります。
<div>
<div style="width:50%; float:left">DJ</div>
<div>genre</div>
</div>
インラインcssをご容赦ください。
このソリューションでは、右端にテキストとボタンが配置されています。
誰かが材料設計の答えを探しているなら:
<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>