Comment créer deux div côte à côte de la même hauteur en CSS

Avec CSS3, vous pouvez très facilement créer des colonnes ou des éléments <div> de la même hauteur alignés côte à côte. Il suffit d’appliquer la propriété display avec la valeur flex sur l’élément parent et la propriété flex avec la valeur 1 sur les sous-éléments, comme illustré sur l’exemple ci-dessous:
 
 

Code source :
<!DOCTYPE html>
<html>
	<head>
		<style>
			.row {
			  display: flex;
			}

			.col {
			  flex: 1; 
			  padding: 1em;
			  border: solid;
			}
		</style>
	</head>
	<body>
		<div class="row">
		  <div class="col">Lorem ipsum gravida vitae tristique a, porttitor sit amet enim.</div>
		  <div class="col">Donec auctor sodales nunc quis tristique. Pellentesque et sollicitudin nisl, sed blandit quam. Quisque tortor enim, blandit id congue eget, sagittis quis ligula. Aenean gravida sagittis ultrices. Duis in erat nec ligula laoreet faucibus.</div>
		</div>
	</body>
</html>
Résultat
Lorem ipsum gravida vitae tristique a, porttitor sit amet enim.
Donec auctor sodales nunc quis tristique. Pellentesque et sollicitudin nisl, sed blandit quam. Quisque tortor enim, blandit id congue eget, sagittis quis ligula. Aenean gravida sagittis ultrices. Duis in erat nec ligula laoreet faucibus.

 

Partagez cet article

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *