Égalisation des hauteurs (pure CSS)

Intention

Égaliser l'hauteur des éléments sur la même ligne de base.

Exemple

Contenant à basse hauteur 1

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 1

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 1

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.

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 2

Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.

Contenant à hauteur moyenne 2

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.

Code

HTML

<section id="simple">
	<h2>Exemple</h2>

	<div class="row wb-eqht-grd">
		<div class="col-sm-6 col-md-4">
			<section>
				<h3>Contenant à basse hauteur 1</h3>
				...
			</section>
		</div>
		<div class="col-sm-6 col-md-4">
			<section>
				<h3>Contenant à hauteur moyenne 1</h3>
				...
			</section>
		</div>
		<div class="col-sm-6 col-md-4">
			<section>
				<h3>Contenant à grande hauteur 1</h3>
				...
			</section>
		</div>
		<div class="col-sm-6 col-md-4">
			<section>
				<h3>Contenant à basse hauteur 2</h3>
				...
			</section>
		</div>
		<div class="col-sm-6 col-md-4">
			<section>
				<h3>Contenant à hauteur moyenne 2</h3>
				...
			</section>
		</div>
	</div>
</section>

SCSS

Exemple remplissage

Note : La dernière rangée divisera toujours vos colonnes proportionellement afin de remplir la pleine largeur.

Contenant à basse hauteur 1

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 1

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 à grande hauteur 1

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.

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 2

Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte. Exemple de texte.

Contenant à hauteur moyenne 2

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.

Code

HTML

<section id="grow">
	<h2>Exemple remplissage</h2>

	<div class="row wb-eqht-grd grow">
		<div class="col-sm-6 col-md-4">
			<section>
				<h3>Contenant à basse hauteur 1</h3>
				...
			</section>
		</div>
		<div class="col-sm-6 col-md-4">
			<section>
				<h3>Contenant à hauteur moyenne 1</h3>
				...
			</section>
		</div>
		<div class="col-sm-6 col-md-4">
			<section>
				<h3>Contenant à grande hauteur 1</h3>
				...
			</section>
		</div>
		<div class="col-sm-6 col-md-4">
			<section>
				<h3>Contenant à basse hauteur 2</h3>
				...
			</section>
		</div>
		<div class="col-sm-6 col-md-4">
			<section>
				<h3>Contenant à hauteur moyenne 2</h3>
				...
			</section>
		</div>
	</div>
</section>

SCSS

Exemple imbriqué

Colonne 1

test
test
test
test
test

Colonne 2

test
test
test
test
test
test
test
test
test

Colonne 3

test
test

Colonne 4

test
test
test
test
test

Code

<section>
	<h2>Exemple imbriqué</h2>

	<div class="row wb-eqht-grd">
		<div class="col-sm-6 col-md-3">
			<div class="parent-example hght-inhrt">
				<section class="panel panel-default hght-inhrt">
					<div class="panel-heading">
						<h3 class="panel-title">Colonne 1</h3>
					</div>
					<div class="panel-body">
						<p>Colonne 1</p>
						...
					</div>
				</section>
			</div>
		</div>

		<div class="col-sm-6 col-md-3">
			<div class="parent-example hght-inhrt">
				<section class="panel panel-default hght-inhrt">
					<div class="panel-heading">
						<h3 class="panel-title">Colonne 2</h3>
					</div>
					<div class="panel-body">
						<p>Colonne 2</p>
						...
					</div>
				</section>
			</div>
		</div>

		<div class="col-sm-6 col-md-3">
			<div class="parent-example hght-inhrt">
				<section class="panel panel-default hght-inhrt">
					<div class="panel-heading">
						<h3 class="panel-title">Colonne 3</h3>
					</div>
					<div class="panel-body">
						<p>Colonne 3</p>
						...
					</div>
				</section>
			</div>
		</div>

		<div class="col-sm-6 col-md-3">
			<div class="parent-example hght-inhrt">
				<section class="panel panel-default hght-inhrt">
					<div class="panel-heading">
						<h3 class="panel-title">Colonne 4</h3>
					</div>
					<div class="panel-body">
						<p>Colonne 4</p>
						...
					</div>
				</section>
			</div>
		</div>
	</div>
</section>

Exemple ciblé à un élément imbriqué plus profondément

l'exemple suivant fait la même chose que si la classe hght-inhrt serais utilisé à partir de l'élément à égaliser jusqu'à l'enfant immédiat de wb-eqht-grd. Utiliser la classe eqht-trgt seulement sur l'élément à égaliser évite ces duplicatas. Cette version utilise Javascript.

Colonne 1

test
test
test
test
test

Colonne 2

test
test
test
test
test
test
test
test
test

Colonne 3

test
test

Code

<section>
	<h2>Exemple ciblé à un élément imbriqué plus profondément</h2>

	<div class="row wb-eqht-grd">
		<div class="col-sm-6 col-md-4">
			<div class="well well-lg">
				<section class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">Colonne 1</h3>
					</div>
					<div class="panel-body eqht-trgt">
						<p>Colonne 1</p>
						...
					</div>
					<footer class="panel-footer">
						<p class="mrgn-tp-sm mrgn-bttm-sm">Bas de panneau</p>
					</footer>
				</section>
			</div>
		</div>

		<div class="col-sm-6 col-md-4">
			<div class="well well-lg">
				<section class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">Colonne 2</h3>
					</div>
					<div class="panel-body eqht-trgt">
						<p>Colonne 2</p>
						...
					</div>
					<footer class="panel-footer">
						<p class="mrgn-tp-sm mrgn-bttm-sm">Bas de panneau</p>
					</footer>
				</section>
			</div>
		</div>

		<div class="col-sm-12 col-md-4">
			<div class="well well-lg">
				<section class="panel panel-default">
					<div class="panel-heading">
						<h3 class="panel-title">Colonne 3</h3>
					</div>
					<div class="panel-body eqht-trgt">
						<p>Colonne 3</p>
						...
					</div>
					<footer class="panel-footer">
						<p class="mrgn-tp-sm mrgn-bttm-sm">Bas de panneau</p>
					</footer>
				</section>
			</div>
		</div>
	</div>
</section>

Détails de la page

Date de modification :: 2023-07-17