50

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

4

7 に答える 7

100 
<div style="float: left;">Left Div</div>
<div style="float: right;">Right Div</div>
于 2009-04-07T23:20:27.447 に答える
36

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

<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 コードの自然な流れの中で望ましい位置にあるためです。

于 2009-04-07T23:29:33.587 に答える
7 
<style>
#div1, #div2 {
   float: left; /* or right */
}
</style>
于 2009-04-07T23:19:14.390 に答える
1

数行のCSSコードでそれを行うことができます。隣り合わせに表示するすべての div を右に揃えることができます。

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

<style>
.div_r{
float:right;
color:red;
}
</style>
于 2015-04-05T04:22:00.647 に答える
1

パディングタグを使用してください上記のフロートタグはうまくいきませんでした、私は使用しました

padding left:5px; 



padding left :30px
于 2015-10-20T06:19:40.467 に答える
0

このソリューションでは、左揃えのテキストとボタンが右端にあります。

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

<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>
于 2016-03-21T18:58:22.917 に答える