É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.

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.

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

#simple, #grow {
	.wb-eqht-grd {
		section {
			border: 1px solid #ddd;
			border-radius: 4px;
			margin-bottom: 23px;
			padding: 10px;
		}
	}
}

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.

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.

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.

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

#simple, #grow {
	.wb-eqht-grd {
		section {
			border: 1px solid #ddd;
			border-radius: 4px;
			margin-bottom: 23px;
			padding: 10px;
		}
	}
}

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 4

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

Colonne 1

  • test
  • test
  • test
  • test
  • test

Bas de panneau

Colonne 2

Colonne 2

  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test
  • test

Bas de panneau

Colonne 3

Colonne 3

  • test
  • test

Bas de panneau

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>
Date de modification :