当前位置：首页 > CSS

css制作许愿墙六块

2026-01-08 20:36:44CSS

CSS 制作许愿墙六块布局

使用 CSS 创建一个六块许愿墙布局可以通过多种方式实现，以下是两种常见的方法：使用 CSS Grid 或 Flexbox。以下代码示例展示了如何实现这两种布局。

方法一：使用 CSS Grid

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>许愿墙六块布局</title>
    <style>
        .wish-wall {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            grid-template-rows: repeat(2, 1fr);
            gap: 10px;
            width: 600px;
            height: 400px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f0f0f0;
        }
        .wish-item {
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            color: #333;
        }
    </style>
</head>
<body>
    <div class="wish-wall">
        <div class="wish-item">许愿1</div>
        <div class="wish-item">许愿2</div>
        <div class="wish-item">许愿3</div>
        <div class="wish-item">许愿4</div>
        <div class="wish-item">许愿5</div>
        <div class="wish-item">许愿6</div>
    </div>
</body>
</html>

方法二：使用 Flexbox

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>许愿墙六块布局</title>
    <style>
        .wish-wall {
            display: flex;
            flex-wrap: wrap;
            width: 600px;
            height: 400px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f0f0f0;
        }
        .wish-item {
            width: calc(33.33% - 10px);
            height: calc(50% - 10px);
            margin: 5px;
            background-color: #fff;
            border: 1px solid #ccc;
            border-radius: 8px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 18px;
            color: #333;
        }
    </style>
</head>
<body>
    <div class="wish-wall">
        <div class="wish-item">许愿1</div>
        <div class="wish-item">许愿2</div>
        <div class="wish-item">许愿3</div>
        <div class="wish-item">许愿4</div>
        <div class="wish-item">许愿5</div>
        <div class="wish-item">许愿6</div>
    </div>
</body>
</html>

关键点说明

CSS Grid：通过 grid-template-columns 和 grid-template-rows 定义三列两行的网格布局，适合规整的网格排列。
Flexbox：通过 flex-wrap 和 calc 计算每个块的宽度和高度，适合灵活的布局需求。
样式调整：可根据需要调整 width、height、gap 或 margin 来改变布局的间距和尺寸。
响应式设计：可以添加媒体查询（Media Queries）使布局在不同屏幕尺寸下适配。