Comment puis-je créer une disposition de maçonnerie en utilisant uniquement CSS ?

Création d'une mise en page de style maçonnerie à l'aide de CSS

Réalisation d'une mise en page de style maçonnerie, où les éléments ont des hauteurs et des largeurs variables, uniquement via CSS a longtemps été un défi. Avec l'avènement de CSS3, ce défi a été surmonté.

Solution CSS3

CSS3 introduit la propriété column-count, qui vous permet de spécifier le nombre de colonnes dans quel contenu doit être présenté. En combinant cette propriété avec la propriété column-gap, qui définit l'espacement entre les colonnes, il est possible de créer une disposition de style maçonnerie.

.container {
  column-count: 2;
  column-gap: 10px;
  width: 360px;
}

.container div {
  display: inline-block;
  width: 100%;
  background-color: red;
}

Dans ce code, l'élément .container définit deux colonnes avec un écart de 10px entre eux. Les éléments div .container sont disposés dans ces colonnes, chaque élément s'étendant sur toute la largeur de la colonne.

Solution non CSS3

Malheureusement, pour les navigateurs qui ne prennent pas en charge CSS3, une mise en page de style maçonnerie ne peut pas être réalisée uniquement via CSS. Dans de tels cas, vous devrez peut-être recourir à des bibliothèques JavaScript à cet effet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!