WP: Aligner un bouton à droite et à gauche sans tableau

L’éditeur HTML de WordPress permet d’aligner un objet :

  • à droite
  •  OU à gauche

Or ici nous nous proposons de placer sur la même ligne 2 objets :

  • l’un à gauche
    ET l’autre à droite

TABLE

La première méthode est d’utiliser les Tableaux, (balise <TABLE> en alignant chaque objet dans sa cellule)

ZOOM G1Xon Effets Spéciaux

C’est simple à faire, mais pas très sexy, on voit la marque du slip…

DIV

La programmation HTML moderne utilise les Conteneurs “<DIV>” (ou <SPAN>) qui correspondent à des “Lignes ou Blocs Virtuels” entièrement paramétrables par le langage CSS.

 

 

 

Code HTML

<div>
  <div style="position: relative; float: left;">
     
  </div>
  <div style="position: relative; float: right;">
     
  </div>
</div>

On utilise 3 conteneurs  DIV:

  1. Le DIV Mère (ou SPAN  si c’est 1 seule ligne, ou n’importe quel conteneur) qui contient les 2 autres :
    <div>
      <div style="">
     </div>
      <div style="">
       </div>
    </div>
  2. Le DIV enfant gauche :
    <div style="position: relative; float: left;">
  3. Le DIV enfant droit :
     <div style="position: relative; float: right;">

Laisser un commentaire