HTML Gauche et à Droite Aligner les Éléments

Pour accomplir ce que j'ai fait:

<table style="width:100%;">
 <tr>
    <td style="width:50%;text-align: left;">left</td>
    <td style="width:50%;text-align: right;">right</td>
  </tr>
</table>

Comment pourrais-je le faire dans la plus simple de la mode (moins de balisage) sans l'aide de tables? Je veux juste aligner 2 éléments pour le max de gauche et de droite.

Il y a des centaines de 2 mises en page en colonnes, mais elle plus adaptée pour la mise en page, et semble exagéré.

OriginalL'auteur mxmissile | 2009-09-21

  1. 8

    Html:

    <div class="left">left</div>
<div class="right">right</div>

    Un peu de CSS:

    .left, .right {
  width: 50%; /* Floated elements technically need a width specified. */
}

.left {
  float: left;
}

.right {
  float: right;
}
    Ajout de texte-align: right; à l' .droit de la classe n'a juste ce dont j'avais besoin, merci.

    OriginalL'auteur Allain Lalonde

  2. 3

    Quelque chose comme ceci:

    CSS

    <style type="text/css">
#primary {
   width: 100%;
}

.secondary {
   width: 50%;
}

.leftcolumn {
   float: left;
   text-align: left;
} 

.rightcolumn {
   float: right;
   text-align: right;
}
</style>

    HTML

    <div id="primary">
   <div class="secondary leftcolumn">
      <p>This will be on the left</p>
   </div>
   <div class="secondary rightcolumn">
      <p>This will be on the right</p>
   </div>
</div>

    Bien que je changerais leftcolumn et rightcolumn à quelque chose de spécifique pour le contenu que chacun contiendra (en faveur d'un sémantique de nommage approche CSS plutôt que structurel).

    OriginalL'auteur Donut