HTML/CSS realizes multi-graph grid layout and title alignment

This tutorial aims to solve the problem of implementing multiple images in HTML in a grid and displaying the corresponding text below each image. We will explore the reasons why figcaption is a block-level element that causes layout misalignment, and provide a solution based on the display: inline-block attribute, which can achieve flexible and responsive side-by-side display of graphics and text by creating a unified packaging container for images and titles.

Understanding the problem: the default behavior of figcaption

In web design, we often need to display image galleries or product lists, with short descriptive text below each image. Beginners may try to place tags and

 <img  src="/static/imghw/default1.png" data-src="img1.png" class="lazy" alt="HTML/CSS realizes multi-graph grid layout and title alignment" > <figcaption> "Image 1 Title" </figcaption>
<img  src="/static/imghw/default1.png" data-src="img2.png" class="lazy" alt="HTML/CSS realizes multi-graph grid layout and title alignment" > <figcaption> "Image 2 Title" </figcaption>

However, this practice often results in each image and its title being exclusive to one line rather than being displayed side by side. This is because the

Solution: inline-block container

To solve this problem, we need to treat each image and its corresponding title as an independent "unit" that can be arranged side by side. The most effective way is to create a common wrapper container for each group of images and titles, and use the display: inline-block property of CSS to control the layout of these containers.

display: inline-block is a very powerful CSS attribute that combines the characteristics of in-line elements and block-level elements:

• In-line characteristics: Elements can be displayed side by side in the same line like text, and will automatically wrap when there is insufficient space.
• Block-level properties: Elements can set block-level properties such as width (width), height (height), inner and outer margin (margin, padding), and the contents inside can be laid out according to the rules of block-level elements.

By wrapping the image and title in a div (or a more semantic

element) and applying display: inline-block to this wrapper container, we can achieve the desired grid layout.

HTML structure

We wrap each image and its title in a div and add a class name to it, such as image-wrapper:

 <div class="gallery-container">
    <div class="image-wrapper">
        <img src="/static/imghw/default1.png" data-src="img1.png" class="lazy" alt="picture 1">
        <figcaption>Image 1 Title</figcaption>
    </div>
    <div class="image-wrapper">
        <img src="/static/imghw/default1.png" data-src="img2.png" class="lazy" alt="picture 2">
        <figcaption>Image 2 Title</figcaption>
    </div>
    <div class="image-wrapper">
        <img src="/static/imghw/default1.png" data-src="img3.png" class="lazy" alt="picture 3">
        <figcaption>Picture 3 title</figcaption>
    </div>
    <!-- More pictures and titles-->
</div>

Note: For better semanticization, it is recommended to use the

element as a wrapper for pictures and titles, and

CSS Style

Next, we add CSS style to the .image-wrapper class:

 <style>
    .gallery-container {
        text-align: center; /* Optional: center all image groups in the parent container*/
    }

    .image-wrapper {
        display: inline-block; /* Key: Make the picture group display side by side*/
        text-align: center; /* center the image and title inside its container*/
        margin: 10px; /* Optional: Set the spacing between picture groups*/
        vertical-align: top; /* Optional: Align the top to avoid misalignment due to different content height*/
        width: calc(33.33% - 20px); /* Example: Three column layout, minus left and right margin */
        max-width: 250px; /* limit the maximum width of each picture*/
    }

    .image-wrapper img {
        max-width: 100%; /* Make sure the image is scaled responsively within its container*/
        height: auto; /* Keep picture aspect ratio*/
        display: block; /* Ensure that the picture is independent and avoid bottom gaps*/
        margin: 0 auto 5px; /* The picture is centered and spaced from the title*/
    }

    .image-wrapper figcaption {
        font-size: 0.9em;
        color: #555;
        padding: 5px;
    }

    /* Responsive adjustment (optional) */
    @media (max-width: 768px) {
        .image-wrapper {
            width: calc(50% - 20px); /* Medium screen displays two columns*/
        }
    }

    @media (max-width: 480px) {
        .image-wrapper {
            width: calc(100% - 20px); /* Small screen displays a column*/
        }
    }
</style>

Key CSS attribute explanation:

• display: inline-block;: This is the core of implementing side-by-side layout.
• text-align: center;: Applied inside .image-wrapper so that the image and title are centered horizontally within their respective containers.
• margin: 10px;: Add external spacing to each image group so that it does not fit tightly.
• vertical-align: top;: When the contents of the inline-block elements are different in height, this property ensures that they are aligned at the top and avoids uneven bottoms.
• width: calc(33.33% - 20px);: This is an example to implement a three-column layout. The calc() function allows mathematical calculations in CSS, where the width of each column is calculated and the left and right margins are subtracted.
• max-width: 100%; and height: auto;: Applied to img tags, ensuring that the image can be automatically adjusted according to the size of its parent container in a responsive layout and maintains its original aspect ratio.
• display: block; (for img): Although img is an inline replacement element, setting it to display: block eliminates extra blanks that may appear under the image (usually caused by baseline alignment) and makes it easier to center through margin: 0 auto.

Complete sample code

Combine HTML structure and CSS styles and you will get a functionally complete picture grid layout:

 


    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Picture and Title Grid Layout</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            margin: 20px;
            background-color: #f4f4f4;
        }

        .gallery-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 10px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            text-align: center; /* center all image groups in the parent container*/
        }

        .image-wrapper {
            display: inline-block; /* Key: Make the picture group display side by side*/
            text-align: center; /* center the image and title inside its container*/
            margin: 10px; /* Set the spacing between picture groups*/
            vertical-align: top; /* Align top*/
            width: calc(33.33% - 20px); /* Example: Three column layout, minus left and right margin */
            min-width: 150px; /* Minimum width to prevent too small*/
            box-sizing: border-box; /* Make sure padding and border are included in the width*/
        }

        .image-wrapper img {
            max-width: 100%; /* Make sure the image is scaled responsively within its container*/
            height: auto; /* Keep picture aspect ratio*/
            display: block; /* Ensure that the picture is independent of the placeholder*/
            margin: 0 auto 8px; /* The picture is centered and spaced from the title*/
            border-radius: 4px;
        }

        .image-wrapper figcaption {
            font-size: 0.9em;
            color: #333;
            padding: 0 5px;
            line-height: 1.4;
        }

        /* Responsive adjustment*/
        @media (max-width: 768px) {
            .image-wrapper {
                width: calc(50% - 20px); /* Medium screen displays two columns*/
            }
        }

        @media (max-width: 480px) {
            .image-wrapper {
                width: calc(100% - 20px); /* Small screen displays a column*/
            }
        }
    </style>



    <div class="gallery-container">
        <div class="image-wrapper">
            <img src="https://via.placeholder.com/250x180/FF5733/FFFFF?text=Image%201" alt="Beautiful Landscape 1">
            <figcaption>This is a beautiful landscape that shows the charm of nature. </figcaption>
        </div>
        <div class="image-wrapper">
            <img src="https://via.placeholder.com/250x200/33FF57/FFFFF?text=Image%202" alt="City Night View 2">
            <figcaption>The city under the night sky is brightly lit and full of light. </figcaption>
        </div>
        <div class="image-wrapper">
            <img src="https://via.placeholder.com/250x160/3357FF/FFFFF?text=Image%203" alt="Abstract Art Works 3">
            <figcaption> An abstract art work full of imagination, which is thought-provoking. </figcaption>
        </div>
        <div class="image-wrapper">
            <img src="https://via.placeholder.com/250x190/FF33A1/FFFFF?text=Image%204" alt="Cute Little Animal 4">
            <figcaption> A furry kitten is exploring the world curiously. </figcaption>
        </div>
        <div class="image-wrapper">
            <img src="https://via.placeholder.com/250x170/A133FF/FFFFFF?text=Image%205" alt="Food Close-up 5">
            <figcaption>The seductive close-up of the food makes people salivate. </figcaption>
        </div>
        <div class="image-wrapper">
            <img src="https://via.placeholder.com/250x210/33FFF3/FFFFF?text=Image%206" alt="Technology Product Display 6">
            <figcaption>The latest smartphone, with exquisite design and powerful functions. </figcaption>
        </div>
    </div>

Further optimization and precautions

1. Semantic HTML: As mentioned earlier, it is more recommended to use a combination of

   and

    <figure class="image-wrapper">
       <img src="/static/imghw/default1.png" data-src="img1.png" class="lazy" alt="picture 1">
       <figcaption>Image 1 Title</figcaption>
   </figure>

   The CSS style remains unchanged because the figure is also a block-level element by default, and display: inline-block is also required.

2. Responsive layout: inline-block itself has certain responsiveness. When the browser window width is insufficient, the element will automatically wrap. Combining width: calc() and media query (@media) allows for finer responsive control, such as displaying different numbers of columns under different screen sizes.

3. Spacing control: Use margin attribute to control horizontal and vertical spacing between picture groups. To avoid extra spacing on the right side of the last column or extra spacing on the left side of the first column, consider using the padding and negative margin tricks of the parent container, or a more modern Flexbox/CSS Grid layout.

4. Image size management: Be sure to set max-width: 100%; and height: auto; for img tags, which ensures that the image is scaled equally within its container and avoids overflow or deformation.

5. Alternative layout solutions: Flexbox and CSS Grid: For more complex grid layout requirements, Flexbox and CSS Grid are more powerful and flexible tools.

   • Flexbox: Suitable for one-dimensional layouts (rows or columns), it allows easy control of the alignment, spacing and order of child elements.
   • CSS Grid: Applicable to two-dimensional layouts (rows and columns), you can directly define the rows and columns of the grid to achieve a more complex layout structure. When you need to have a more granular control over the number of columns, row heights, and cell spacing, you can consider learning and using these two modern layout techniques.

6. Accessibility: Always provide meaningful alt attributes for tags. This is not only helpful for search engine optimization, but more importantly, it can provide visually impaired users with text descriptions of image content and improve the accessibility of the website.

With the above methods, you can efficiently achieve a beautiful and responsive picture grid layout in the webpage and clearly display its descriptive text under each image.

The above is the detailed content of HTML/CSS realizes multi-graph grid layout and title alignment. For more information, please follow other related articles on the PHP Chinese website!