web-dev-qa-db-fra.com

Quelle est la meilleure façon d'aligner à gauche et à droite deux balises div?

Quel est le meilleur moyen d'aligner à droite et à gauche deux balises div sur une page Web horizontalement l'une à côté de l'autre? Je voudrais une solution élégante pour le faire si possible.

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

Comme alternative à la flottaison:

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

Considérant qu'il n'y a aucune nécessité de positionner la div .left en tant qu'absolu (selon votre direction, il pourrait s'agir de la droite) car cela serait dans la position souhaitée dans le flux naturel du code html.

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

Vous pouvez le faire avec quelques lignes deCSScode. Vous pouvez aligner tous les div que vous voulez voir côte à côte .

<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

utiliser des balises de remplissage les balises flottantes ci-dessus n'ont pas fonctionné

padding left:5px; 



padding left :30px
0
JavaDragon

J'ai utilisé le ci-dessous. L’élément genre commencera là où se termine l’élément DJ,

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

pardonnez le css en ligne.

0
Sachin Kotian

Cette solution a laissé un texte et un bouton alignés à l'extrême droite.

Si quelqu'un cherche une solution matérielle, répondez:

<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