Égalisation des hauteurs
Intention
Égaliser l'hauteur des éléments sur la même ligne de base.
Exemple
Contenant à basse hauteur
Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.
Contenant à hauteur moyenne
Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.
Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent.
Contenant à grande hauteur
Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.
Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent.
Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte.
Contenant à basse hauteur
Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.
Contenant à hauteur moyenne
Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.
Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent.
Contenant à grande hauteur
Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.
Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent.
Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte.
Contenant à basse hauteur
Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.
Contenant à hauteur moyenne
Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.
Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent.
Contenant à grande hauteur
Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.
Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent. Exemple de texte différent.
Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte. Autre exemple de texte.
Code
HTML
<div class="wb-eqht">
<section>
<h3>Contenant à basse hauteur</h3>
...
</section>
<section>
<h3>Contenant à hauteur moyenne</h3>
...
</section>
<section>
<h3>Contenant à grande hauteur</h3>
...
</section>
</div>
<div class="wb-eqht">
<section>
<h3>Contenant à basse hauteur</h3>
...
</section>
<section>
<h3>Contenant à hauteur moyenne</h3>
...
</section>
<section>
<h3>Contenant à grande hauteur</h3>
...
</section>
<section>
<h3>Contenant à basse hauteur</h3>
...
</section>
<section>
<h3>Contenant à hauteur moyenne</h3>
...
</section>
<section>
<h3>Contenant à grande hauteur</h3>
...
</section>
</div>
CSS
.wb-eqht section {
display: inline-block;
margin-bottom: 15px;
padding: 15px;
width: 100%;
}
@media (min-width: 768px) {
.wb-eqht section {
width: 49%;
}
}
@media (min-width: 1200px) {
.wb-eqht section {
width: 33%;
}
}
Exemple imbriqué
Colonne 1
Colonne 1
- test
- test
- test
- test
- test
Colonne 2
Colonne 2
- test
- test
- test
- test
- test
- test
- test
- test
- test
Colonne 3
Colonne 3
- test
- test
Colonne 1
Colonne 1
- test
- test
- test
- test
- test
- Date de modification :