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

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

Contenant à hauteur moyenne

Contenant à grande hauteur

Contenant à basse hauteur

Contenant à hauteur moyenne

Contenant à grande hauteur

Code

HTML

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

	<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>
</section>

CSS

#simple .wb-eqht section {
	display: inline-block;
	margin-bottom: 15px;
	padding: 15px;
	width: 100%;
}

@media (min-width: 768px) {
	#simple .wb-eqht section {
		width: 49%;
	}
}

@media (min-width: 1200px) {
	#simple .wb-eqht section {
		width: 33%;
	}
}

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 1

test
test
test
test
test

Code

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

	<div class="row wb-eqht">
		<div class="col-sm-6 col-md-3">
			<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 class="col-sm-6 col-md-3">
			<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 class="col-sm-6 col-md-3">
			<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 class="col-sm-6 col-md-3">
			<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>
</section>

Date de modification :: 2014-09-30

Sélection de la langue

Recherche et menus

Recherche

Égalisation des hauteurs

Intention

Exemple

Contenant à basse hauteur

Contenant à hauteur moyenne

Contenant à grande hauteur

Contenant à basse hauteur

Contenant à hauteur moyenne

Contenant à grande hauteur

Contenant à basse hauteur

Contenant à hauteur moyenne

Contenant à grande hauteur

Code

HTML

CSS

Exemple imbriqué

Colonne 1

Colonne 2

Colonne 3

Colonne 1

Code