Méthode de mise en œuvre de la mise en page multi-colonnes dans le développement front-end

Cette fois, je vais vous présenter la méthode d'implémentation de la mise en page multi-colonnes dans le développement front-end. Quelles sont les précautions pour implémenter la mise en page multi-colonnes dans le développement front-end. Voici un cas pratique. , jetons un coup d'oeil.

Mise en page multi-colonnes

La disposition à plusieurs colonnes est également relativement courante dans le développement Web frontal, comme les trois colonnes, quatre colonnes et plus communes. La disposition en colonnes permet à une seule page d'afficher un contenu plus catégorisé. Les dispositions multi-colonnes mentionnées ici incluent deux colonnes à largeur fixe et une colonne adaptative, plusieurs colonnes à largeur variable et une colonne adaptative, ainsi qu'une disposition multi-colonnes.

Deux colonnes à largeur fixe et une colonne à disposition adaptative

Ce mode de mise en page est divisé en trois colonnes, dont deux ont une largeur fixe et une colonne dont la largeur change avec la largeur du contenu.

Deux colonnes de largeur fixe plus une colonne adaptative

Dans ce cas, la hauteur de chaque colonne est adaptative, c'est-à-dire que la hauteur est cohérente avec la hauteur du contenu. La largeur de la colonne de gauche et de la colonne du milieu est de 100 px, et la largeur de la colonne de droite est adaptative. est implémenté via floatmise en page flottante combinée aux caractéristiques des éléments au niveau du bloc. Il est à noter que la couleur de fond peut être définie sur la balise p ou sur la balise p.

Plusieurs colonnes à largeur variable plus une colonne adaptative

Le cas expliqué ici est un schéma de mise en page hautement adaptatif avec deux colonnes de largeur variable et une colonne adaptative,

Voici plusieurs colonnes de largeur variable plus une colonne adaptative

La première chose à comprendre est la largeur variable. Cela signifie que la largeur de la colonne peut être définie sur d'autres valeurs à tout moment. Ici, nous pouvons définir la largeur de la colonne de gauche sur n'importe quelle valeur sans modifier la disposition. mode, nous voyons donc que le code pour implémenter cette disposition est le même que ci-dessus. Ce qu'il faut noter, c'est la différence entre la largeur variable et la largeur adaptative.

Parties égales multi-colonnes

La disposition multi-colonnes consiste à afficher plusieurs colonnes sur la page. Les largeurs de ces colonnes sont cohérentes, l'espacement est cohérent et la hauteur est adaptative

. Mise en œuvre facile de la distribution multi-colonnes

Définissez margin-left sur -20px sur le conteneur parent, ajoutez 20px à la largeur du conteneur parent, définissez le flottement à gauche sur le conteneur de colonne et définissez la largeur de chaque conteneur enfant à 25 % du parent. conteneur En même temps, définissez le sous-conteneur padding-left sur 20px et le mode d'affichage sur border-box (la largeur et la hauteur du modèle de boîte affiché de manière réaliste. mode sont la largeur et la hauteur de la boîte). Cette solution permet d'obtenir une distribution égale en augmentant la largeur du conteneur parent de 20 px (largeur de l'espace), en affichant l'espacement à l'intérieur du conteneur enfant et en définissant le conteneur enfant comme zone de bordure.

Cet article répertorie uniquement les solutions pour implémenter une disposition multi-colonnes via float. Il existe également des solutions d'implémentation correspondantes via flex, table, etc.

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

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!