How to create a responsive card waterfall layout using HTML and CSS-HTML Tutorial-php.cn

How to create a responsive card waterfall layout using HTML and CSS

WBOY

Release： 2023-10-24 12:06:14

Original

637 people have browsed it

How to create a responsive card waterfall layout using HTML and CSS

In today's web design, responsive design has become a necessity. As more and more users access the internet on a variety of devices, we need to ensure that web pages adapt well to different screen sizes and device types. This article will show you how to create a responsive card waterfall layout using HTML and CSS.

First of all, let us understand what waterfall layout is. Waterfall layout is a very popular web page layout that simulates the flow of water in a waterfall and arranges content in the form of cards. This layout can effectively display large amounts of content and is ideal for displaying images and short snippets.

Next, we will create a simple waterfall layout using HTML and CSS.

HTML part:

<!DOCTYPE html>
<html>

<head>
    <title>响应式卡片瀑布流布局</title>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

<body>
    <div class="container">
        <div class="card">
            <img src="image1.jpg" alt="Image">
            <h3>卡片标题1</h3>
            <p>卡片内容1</p>
        </div>
    
        <div class="card">
            <img src="image2.jpg" alt="Image">
            <h3>卡片标题2</h3>
            <p>卡片内容2</p>
        </div>
    
        <div class="card">
            <img src="image3.jpg" alt="Image">
            <h3>卡片标题3</h3>
            <p>卡片内容3</p>
        </div>
    
        <!-- 更多卡片... -->
    </div>
</body>

</html>

Copy after login

In the above code, we first create a parent container container, and then create multiple cards card in the container . Each card contains an image, a title and a piece of content.

Next, let’s create the CSS style:

.container {
    column-count: 3;  /* 将容器分为3列 */
    column-gap: 10px;  /* 列之间的间隔 */
}

.card {
    display: inline-block;
    margin-bottom: 20px;
    width: 100%;  /* 卡片宽度自适应 */
}

.card img {
    width: 100%;  /* 图片宽度自适应 */
}

@media screen and (min-width: 600px) {
    .container {
        column-count: 4;  /* 在宽度大于600px时，将容器分为4列 */
    }
}

@media screen and (min-width: 900px) {
    .container {
        column-count: 5;  /* 在宽度大于900px时，将容器分为5列 */
    }
}

Copy after login

In the CSS style, we set 3 columns to the container and added a little space between the columns. inline-blockEnables cards to be arranged in a waterfall flow. width: 100%Enables the width of the card to adapt to the screen size.

In the media query part, we use @media to set different number of columns according to different screen widths. When the screen width is greater than 600px, the container is divided into 4 columns; when the screen width is greater than 900px, the container is divided into 5 columns.

In this way, we have created a simple responsive card waterfall flow layout. You can customize the content and style of the card as needed, as well as adjust the number of columns and spacing.

Summary:

This article introduces you to how to use HTML and CSS to create a responsive card waterfall layout. By using the column-count attribute and media queries, we can easily implement adaptive arrangement of cards and adjustment of the number of columns. I hope this article was helpful and I wish you success in creating web page layouts!

The above is the detailed content of How to create a responsive card waterfall layout using HTML and CSS. For more information, please follow other related articles on the PHP Chinese website!