Skip to content

Aligner des blocs en CSS

Soyez sociable ! Partagez :
  • Facebook
  • Twitter
  • Delicious
  • LinkedIn
  • StumbleUpon
  • Add to favorites
  • Email
  • RSS

Quel intégrateur, ou développeur Web, ne s’est jamais tiré les cheveux sur l’alignement de bloc en CSS. Surtout quand il s’agit de faire des blocs de contenu.

Si vous souhaitez que votre site ressemble à l’image d’illustration, et article est fait pour vous !

Css Aligner Block

 

Aligner des Blocks en CSS

Lorsque l’on souhaite aligner des blocs, la plus grande problématique consiste à donner la même taille à ces blocs.

Imaginons créer un système de 12 colonnes :

Pourquoi 12 colonnes ?

On choisit en général 12 colonnes, car il est à la fois un multiple de 2, de 3, de 4 et de 6. Et en général, dans nos sites, on souhaite aligner soit 2 blocs, soit 3 blocs, soit 4 blocs ou 6 blocs.

Bien entendu, nous allons créer un design responsive et nous allons utiliser le “%” plutôt que le “px”.

Pour chaque div que nous créons, nous allons lui appliquer les propriétés CSS suivantes :

div{
  margin: 0 3% 3% 0:
  float: left;
}

Puis nous allons créer un suite de class que nous allons nommer col<num> en leur donnant un taille :

.col12{
  /* Un block de 12 colonnes */
  width: 99%;
  margin-right: 0; /* Pas besoin de margin right !! */
}
.col11{ 
  /* Un block de 11 colonnes */
  width: 90.5%;
}
.col10{ width: 82%; }
.col9{ width: 73.5%; }
.col8{ width: 65%; }
.col7{ width: 56.5%; }
.col6{ width: 48%; }
.col5{ width: 39.5%; }
.col4{ width: 31%; }
.col3{ width: 22.5%; }
.col2{ width: 14%; }
.col1{ width: 5.5%; }

.last{
  margin-right:0;
}

 Petite démonstration ?

Je veux aligner deux blocks :

<div class="col6">
  <!-- CONTENU -->
</div>
<div class="col6 last">
  <!-- CONTENU -->
</div>

J’ai donc deux blocs parfaitement alignés. Preuve mathématique :

col6 = 48%, J’ai 2 col6 soit = 96% + les 3% de margin = 99%.

Si on souhaite mettre un bloc complet en dessous, il suffit d’ajouter un div ayant pour class col12  et on aura 3 blocs parfaitement alignés !

Voilà, si vous avez des questions n’hésitez pas.

Source : http://onepcssgrid.mattimling.com/

Soyez Sociable ! Partagez !
Published inTutoriel
banner