Égalisation des hauteurs

Vous cherchez la BOEW v3.1?

À partir du 23 septembre 2014, la version 3.1 de la Boîte à outils de l'expérience Web n'est plus supportée. Le code source et la documentation ont été déplacés vers le dépôt wet-boew-legacy.

Intention

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

Exemple

Contenant à basse hauteur

Exemple de texte : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vehicula mauris ipsum, nec facilisis sem eleifend eu. Donec fringilla dapibus massa ut tristique. In id nulla at purus vehicula vehicula. Morbi lacinia odio ut nulla euismod sagittis. Mauris interdum eu nibh in tincidunt. Praesent non tincidunt risus, et malesuada est. Mauris nisl nunc, pharetra sed dapibus vel, iaculis vitae lorem.

Contenant à hauteur moyenne

Exemple de texte : In eget diam ac lectus consectetur accumsan et quis turpis. Nam vitae vulputate odio, vel posuere nunc. Mauris at pharetra lorem, ac commodo neque. Integer adipiscing luctus orci eu aliquet. Phasellus fermentum accumsan augue at dignissim. Proin malesuada leo quis ante ornare, vitae pellentesque lorem vulputate. Fusce fermentum, nibh sit amet interdum luctus, sapien magna tristique orci, in ultrices turpis mi lacinia quam. Etiam gravida velit id tempor vulputate. Maecenas aliquet pulvinar viverra. Quisque luctus viverra sem ut suscipit. Suspendisse et mi justo.

Contenant à grande hauteur

Exemple de texte : Vivamus felis erat, lobortis vel justo eu, blandit aliquam arcu. Nunc tempus dictum magna id consequat. Morbi sodales mi et ligula congue aliquet. Mauris sapien nibh, porta a interdum quis, vehicula eu nunc. Sed semper in mi sit amet vehicula. Maecenas placerat suscipit eleifend. Proin diam justo, vulputate ut hendrerit sit amet, faucibus non urna. Nulla placerat, quam ut vulputate faucibus, odio erat fermentum nisl, vitae tempus lectus orci vitae leo. Praesent cursus tellus nec mi fringilla, eu euismod quam egestas. Proin dolor dui, luctus a nibh id, accumsan vehicula metus. Cras venenatis felis vitae magna cursus, ut fringilla tortor imperdiet. Curabitur dictum posuere sem, a luctus turpis ultrices ac. Morbi semper consectetur massa in fringilla. Nulla ipsum tellus, dictum a commodo vel, sodales pulvinar eros. Donec mollis sapien a nunc lacinia, eu porta enim eleifend. Vivamus non feugiat felis, in sodales tellus.

Contenant à basse hauteur

Exemple de texte : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vehicula mauris ipsum, nec facilisis sem eleifend eu. Donec fringilla dapibus massa ut tristique. In id nulla at purus vehicula vehicula. Morbi lacinia odio ut nulla euismod sagittis. Mauris interdum eu nibh in tincidunt. Praesent non tincidunt risus, et malesuada est. Mauris nisl nunc, pharetra sed dapibus vel, iaculis vitae lorem.

Contenant à hauteur moyenne

Exemple de texte : In eget diam ac lectus consectetur accumsan et quis turpis. Nam vitae vulputate odio, vel posuere nunc. Mauris at pharetra lorem, ac commodo neque. Integer adipiscing luctus orci eu aliquet. Phasellus fermentum accumsan augue at dignissim. Proin malesuada leo quis ante ornare, vitae pellentesque lorem vulputate. Fusce fermentum, nibh sit amet interdum luctus, sapien magna tristique orci, in ultrices turpis mi lacinia quam. Etiam gravida velit id tempor vulputate. Maecenas aliquet pulvinar viverra. Quisque luctus viverra sem ut suscipit. Suspendisse et mi justo.

Contenant à grande hauteur

Exemple de texte : Vivamus felis erat, lobortis vel justo eu, blandit aliquam arcu. Nunc tempus dictum magna id consequat. Morbi sodales mi et ligula congue aliquet. Mauris sapien nibh, porta a interdum quis, vehicula eu nunc. Sed semper in mi sit amet vehicula. Maecenas placerat suscipit eleifend. Proin diam justo, vulputate ut hendrerit sit amet, faucibus non urna. Nulla placerat, quam ut vulputate faucibus, odio erat fermentum nisl, vitae tempus lectus orci vitae leo. Praesent cursus tellus nec mi fringilla, eu euismod quam egestas. Proin dolor dui, luctus a nibh id, accumsan vehicula metus. Cras venenatis felis vitae magna cursus, ut fringilla tortor imperdiet. Curabitur dictum posuere sem, a luctus turpis ultrices ac. Morbi semper consectetur massa in fringilla. Nulla ipsum tellus, dictum a commodo vel, sodales pulvinar eros. Donec mollis sapien a nunc lacinia, eu porta enim eleifend. Vivamus non feugiat felis, in sodales tellus.

Contenant à basse hauteur

Exemple de texte : Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vehicula mauris ipsum, nec facilisis sem eleifend eu. Donec fringilla dapibus massa ut tristique. In id nulla at purus vehicula vehicula. Morbi lacinia odio ut nulla euismod sagittis. Mauris interdum eu nibh in tincidunt. Praesent non tincidunt risus, et malesuada est. Mauris nisl nunc, pharetra sed dapibus vel, iaculis vitae lorem.

Contenant à hauteur moyenne

Exemple de texte : In eget diam ac lectus consectetur accumsan et quis turpis. Nam vitae vulputate odio, vel posuere nunc. Mauris at pharetra lorem, ac commodo neque. Integer adipiscing luctus orci eu aliquet. Phasellus fermentum accumsan augue at dignissim. Proin malesuada leo quis ante ornare, vitae pellentesque lorem vulputate. Fusce fermentum, nibh sit amet interdum luctus, sapien magna tristique orci, in ultrices turpis mi lacinia quam. Etiam gravida velit id tempor vulputate. Maecenas aliquet pulvinar viverra. Quisque luctus viverra sem ut suscipit. Suspendisse et mi justo.

Contenant à grande hauteur

Exemple de texte : Vivamus felis erat, lobortis vel justo eu, blandit aliquam arcu. Nunc tempus dictum magna id consequat. Morbi sodales mi et ligula congue aliquet. Mauris sapien nibh, porta a interdum quis, vehicula eu nunc. Sed semper in mi sit amet vehicula. Maecenas placerat suscipit eleifend. Proin diam justo, vulputate ut hendrerit sit amet, faucibus non urna. Nulla placerat, quam ut vulputate faucibus, odio erat fermentum nisl, vitae tempus lectus orci vitae leo. Praesent cursus tellus nec mi fringilla, eu euismod quam egestas. Proin dolor dui, luctus a nibh id, accumsan vehicula metus. Cras venenatis felis vitae magna cursus, ut fringilla tortor imperdiet. Curabitur dictum posuere sem, a luctus turpis ultrices ac. Morbi semper consectetur massa in fringilla. Nulla ipsum tellus, dictum a commodo vel, sodales pulvinar eros. Donec mollis sapien a nunc lacinia, eu porta enim eleifend. Vivamus non feugiat felis, in sodales tellus.

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