HTML / CSS réalise la mise en page et l'alignement de la grille multi-graphiques et le titre

Ce tutoriel vise à résoudre le problème de l'implémentation de plusieurs images dans HTML dans une grille et à afficher le texte correspondant sous chaque image. Nous explorerons les raisons pour lesquelles FigCaption est un élément au niveau du bloc qui provoque un désalignement de mise en page et fournir une solution basée sur l'affichage: attribut de blocage en ligne, qui peut réaliser un affichage côte à côte flexible et réactif des graphiques et du texte en créant un conteneur d'emballage unifié pour les images et les titres.

Comprendre le problème: le comportement par défaut de Figcaption

Dans la conception Web, nous devons souvent afficher des galeries d'images ou des listes de produits, avec un texte descriptif court sous chaque image. Les débutants peuvent essayer de placer des balises et des balises directement côte à côte, s'attendant à ce qu'ils puissent être disposés automatiquement en plusieurs colonnes. Par exemple:

 <img  src="img1.png" alt="HTML / CSS réalise la mise en page et l'alignement de la grille multi-graphiques et le titre" > <gigon> "Image 1 title" 
<img  src="img2.png" alt="HTML / CSS réalise la mise en page et l'alignement de la grille multi-graphiques et le titre" > <figcaption> "image 2 title" </figcaption></gigon>

Cependant, cette pratique se traduit souvent par chaque image et son titre étant exclusif à une seule ligne plutôt que d'être affiché côte à côte. En effet, l'élément

Solution: conteneur à blocs en ligne

Pour résoudre ce problème, nous devons traiter chaque image et son titre correspondant comme une "unité" indépendante qui peut être disposée côte à côte. Le moyen le plus efficace consiste à créer un conteneur en wrapper commun pour chaque groupe d'images et de titres, et d'utiliser l'affichage: propriété en bloc en ligne de CSS pour contrôler la disposition de ces conteneurs.

Affichage: le bloc en ligne est un attribut CSS très puissant qui combine les caractéristiques des éléments en ligne et des éléments au niveau des blocs:

• Caractéristiques en ligne: les éléments peuvent être affichés côte à côte dans la même ligne que le texte, et envelopperont automatiquement en cas d'espace insuffisant.
• Propriétés au niveau des blocs: les éléments peuvent définir des propriétés au niveau du bloc telles que la largeur (largeur), la hauteur (hauteur), la marge intérieure et extérieure (marge, rembourrage) et le contenu à l'intérieur peut être présenté en fonction des règles des éléments au niveau du bloc.

En enveloppez l'image et le titre dans un élément div (ou un élément

plus sémantique) et en appliquant l'affichage: bloc en ligne à ce conteneur en wrapper, nous pouvons réaliser la disposition de la grille souhaitée.

Structure HTML

Nous enroulons chaque image et son titre dans un div et y ajoutons un nom de classe, comme l'image-robe:

 <div class="galerie-container">
    <div class="image-wrapper">
        <img src="img1.png" alt="image 1">
        <figcaption> Image 1 Title </figcaption>
    </div>
    <div class="image-wrapper">
        <img src="img2.png" alt="image 2">
        <figcaption> Image 2 Title </figcaption>
    </div>
    <div class="image-wrapper">
        <img src="img3.png" alt="image 3">
        <figcaption> Picture 3 Title </figcaption>
    </div>
    
</div>

REMARQUE: Pour une meilleure sémanisation, il est recommandé d'utiliser l'élément comme un wrapper pour les images et les titres, et

Style CSS

Ensuite, nous ajoutons le style CSS à la classe .image-wrapper:

 <style>
    .gallery-container {
        Texte-aligne: Centre; / * Facultatif: Centre tous les groupes d&#39;images dans le conteneur parent * /
    }

    .image-wrapper {
        Affichage: bloc en ligne; / * Clé: faire l&#39;affichage du groupe d&#39;images côte à côte * /
        Texte-aligne: Centre; / * Centre l&#39;image et le titre à l&#39;intérieur de son conteneur * /
        marge: 10px; / * Facultatif: définissez l&#39;espacement entre les groupes d&#39;images * /
        Aligne verticale: haut; / * Facultatif: alignez le haut pour éviter le désalignement en raison de la hauteur différente du contenu * /
        Largeur: calc (33,33% - 20px); / * Exemple: trois colonnes, moins la marge gauche et droite * /
        largeur maximale: 250px; / * limiter la largeur maximale de chaque image * /
    }

    .image-wrapper img {
        largeur maximale: 100%; / * Assurez-vous que l&#39;image est mise à l&#39;échelle de manière responsable dans son conteneur * /
        Hauteur: Auto; / * Conserver le rapport d&#39;aspect d&#39;image * /
        Affichage: bloc; / * Assurez-vous que l&#39;image est indépendante et évite les lacunes du fond * /
        marge: 0 Auto 5px; / * L&#39;image est centrée et espacée du titre * /
    }

    .image-wrapper Figcaption {
        taille de police: 0,9em;
        Couleur: # 555;
        rembourrage: 5px;
    }

    / * Ajustement réactif (facultatif) * /
    @media (max-large: 768px) {
        .image-wrapper {
            Largeur: calc (50% - 20px); / * L&#39;écran moyen affiche deux colonnes * /
        }
    }

    @media (max-largeur: 480px) {
        .image-wrapper {
            Largeur: calc (100% - 20px); / * Petit écran affiche une colonne * /
        }
    }
</ style></style>

Explication de l'attribut CSS clé:

• Affichage: bloc en ligne;: Il s'agit du cœur de la mise en œuvre de la disposition côte à côte.
• Texte-aligne: Centre;: appliqué à l'intérieur .image-wrapper afin que l'image et le titre soient centrés horizontalement dans leurs conteneurs respectifs.
• Marge: 10px;: Ajoutez un espacement externe à chaque groupe d'images afin qu'il ne s'adapte pas étroitement.
• Adigne vertical: en haut;: Lorsque le contenu des éléments de blocage en ligne est différent en hauteur, cette propriété garantit qu'elles sont alignées en haut et évite les bas inégaux.
• Largeur: calc (33,33% - 20px);: Ceci est un exemple pour implémenter une disposition à trois colonnes. La fonction calc () permet des calculs mathématiques dans CSS, où la largeur de chaque colonne est calculée et les marges gauche et droite sont soustraites.
• largeur maximale: 100%; et hauteur: Auto;: appliqué aux balises IMG, garantissant que les images peuvent être automatiquement ajustées en fonction de la taille de leur conteneur parent dans une disposition réactive et maintenir leur rapport d'aspect d'origine.
• Affichage: bloc; (pour IMG): Bien que IMG soit un élément de remplacement en ligne, le définir pour afficher: Block élimine des blancs supplémentaires qui peuvent apparaître sous l'image (généralement causée par l'alignement de base) et facilite le centre de la marge: 0 auto.

Exemple de code complet

Combinez la structure HTML et les styles CSS et vous obtiendrez une disposition de grille d'image fonctionnellement complète:

 

<adal>
    <meta charset="utf-8">
    <meta name="Viewport" content="width = Device-width, initial-scale = 1.0">
    <title> Entente sur la grille d'image et de titre 
    <style>
        corps {
            Font-Family: Arial, Sans-Serif;
            marge: 20px;
            Color d&#39;arrière-plan: # F4F4F4;
        }

        .gallery-container {
            largeur maximale: 1200px;
            marge: 0 auto;
            rembourrage: 10px;
            Color d&#39;arrière-plan: #FFF;
            Border-Radius: 8px;
            Box-Shadow: 0 2px 5px RGBA (0,0,0,0,1);
            Texte-aligne: Centre; / * Centre tous les groupes d&#39;images dans le conteneur parent * /
        }

        .image-wrapper {
            Affichage: bloc en ligne; / * Clé: faire l&#39;affichage du groupe d&#39;images côte à côte * /
            Texte-aligne: Centre; / * Centre l&#39;image et le titre à l&#39;intérieur de son conteneur * /
            marge: 10px; / * Définissez l&#39;espacement entre les groupes d&#39;images * /
            Aligne verticale: haut; / * Aligner le haut * /
            Largeur: calc (33,33% - 20px); / * Exemple: trois colonnes, moins la marge gauche et droite * /
            largeur min: 150px; / * Largeur minimale pour éviter trop petit * /
            Dimensionnement en boîte: Border-Box; / * Assurez-vous que le rembourrage et la bordure sont inclus dans la largeur * /
        }

        .image-wrapper img {
            largeur maximale: 100%; / * Assurez-vous que l&#39;image est mise à l&#39;échelle de manière responsable dans son conteneur * /
            Hauteur: Auto; / * Conserver le rapport d&#39;aspect d&#39;image * /
            Affichage: bloc; / * Assurez-vous que l&#39;image est indépendante de l&#39;espace réservé * /
            marge: 0 Auto 8px; / * L&#39;image est centrée et espacée du titre * /
            Border-Radius: 4px;
        }

        .image-wrapper Figcaption {
            taille de police: 0,9em;
            Couleur: # 333;
            rembourrage: 0 5px;
            hauteur de ligne: 1.4;
        }

        / * Ajustement réactif * /
        @media (max-large: 768px) {
            .image-wrapper {
                Largeur: calc (50% - 20px); / * L&#39;écran moyen affiche deux colonnes * /
            }
        }

        @media (max-largeur: 480px) {
            .image-wrapper {
                Largeur: calc (100% - 20px); / * Petit écran affiche une colonne * /
            }
        }
    </ style>
</ head>
<body>

    <div class = "galerie-container">
        <div class = "image-wrapper">
            <img src = "https://via.placeholder.com/250x180/ff5733/fffff?text=image 1" alt = "Beau paysage 1">
            <FigCaption> C&#39;est un beau paysage qui montre le charme de la nature. </ figCaption>
        
        <div class = "image-wrapper">
            <img src = "https://via.placeholder.com/250x200/33ff57/fffff?text=image 2" alt = "City Night View 2">
            <Figcaption> La ville sous le ciel nocturne est brillamment éclairée et pleine de lumière. </ figCaption>
        
        <div class = "image-wrapper">
            <img src = "https://via.placeholder.com/250x160/3357ff/fffff?text=image 3" alt = "Avaluation d&#39;art abstraite 3">
            <Figcaption> Une œuvre d&#39;art abstraite pleine d&#39;imagination, qui stimule la réflexion. </ figCaption>
        
        <div class = "image-wrapper">
            <img src = "https://via.placeholder.com/250x190/ff33a1/fffff?text=image 4" alt = "mignon petit animal 4">
            <Figcaption> Un chaton à fourrure explore le monde curieusement. </ figCaption>
        
        <div class = "image-wrapper">
            <img src = "https://via.placeholder.com/250x170/a133ff/ffffff?text=image 5" alt = "Food Close-up 5">
            <Figction> Le gros plan séduisant des aliments fait saliver les gens. </ figCaption>
        
        <div class = "image-wrapper">
            <img src = "https://via.placeholder.com/250x210/33fff3/fffff?text=image 6" alt = "Affichage du produit technologique 6">
            <FigCaption> Le dernier smartphone, avec une conception exquise et des fonctions puissantes. </ figCaption>
        
    


</style>
</title></adal>

Optimisation et précautions supplémentaires

1. HTML sémantique: Comme mentionné précédemment, il est davantage recommandé d'utiliser une combinaison de

   et de

    <figure class="image-wrapper">
       <img src="img1.png" alt="image 1">
       <figcaption> Image 1 Title </figcaption>
    figure></figure>

   Le style CSS reste inchangé car la figure est également un élément au niveau du bloc par défaut, et l'affichage: le bloc en ligne est également requis.

2. Disposition réactive: le bloc en ligne lui-même a une certaine réactivité. Lorsque la largeur de la fenêtre du navigateur est insuffisante, l'élément s'enroule automatiquement. La combinaison de la largeur: calc () et la requête multimédia (@media) permet un contrôle réactif plus fin, comme afficher différents nombres de colonnes sous différentes tailles d'écran.

3. Contrôle d'espacement: utilisez l'attribut de marge pour contrôler l'espacement horizontal et vertical entre les groupes d'images. Pour éviter un espacement supplémentaire sur le côté droit de la dernière colonne ou un espacement supplémentaire sur le côté gauche de la première colonne, pensez à utiliser les astuces de rembourrage et de marge négative du conteneur parent, ou une disposition de grille Flexbox / CSS plus moderne.

4. Gestion de la taille de l'image: assurez-vous de définir la largeur maximale: 100%; et hauteur: auto; Pour les balises IMG, qui garantit que l'image est mise à l'échelle également dans son conteneur et évite le débordement ou la déformation.

5. Solutions de mise en page alternatives: Flexbox et GRID CSS: Pour les exigences de mise en page plus complexes, Flexbox et CSS Grid sont des outils plus puissants et flexibles.

   • FLEXBOX: Convient pour les dispositions unidimensionnelles (lignes ou colonnes), il permet un contrôle facile de l'alignement, de l'espacement et de l'ordre des éléments enfants.
   • Grille CSS: applicable aux dispositions bidimensionnelles (lignes et colonnes), vous pouvez définir directement les lignes et les colonnes de la grille pour obtenir une structure de disposition plus complexe. Lorsque vous devez avoir un contrôle plus granulaire sur le nombre de colonnes, de hauteurs de lignes et d'espacement cellulaire, vous pouvez envisager d'apprendre et d'utiliser ces deux techniques de disposition modernes.

6. Accessibilité: fournissez toujours des attributs ALT significatifs pour les balises . Ceci est non seulement utile pour l'optimisation des moteurs de recherche, mais plus important encore, il peut fournir aux utilisateurs des utilisateurs visuellement des descriptions de texte du contenu de l'image et améliorer l'accessibilité du site Web.

Avec les méthodes ci-dessus, vous pouvez réaliser efficacement une disposition de grille d'image belle et réactive dans la page Web et afficher clairement son texte descriptif sous chaque image.

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!