利用CSS实现九宫格

向日葵~~

已于 2023-06-12 18:41:35 修改

阅读量353

点赞数

CC 4.0 BY-SA版权

文章标签： css html 前端

于 2023-06-12 15:59:02 首次发布

本文链接：https://blog.csdn.net/qq_56351254/article/details/131170663

本文展示了如何使用CSS的弹性布局和浮动属性来创建一个九宫格布局。在弹性布局示例中，通过设置`display:flex`和`flex-wrap:wrap`实现换行排列，而在浮动布局中，使用`float:left`和清除浮动确保元素正确对齐。两种方法都分别给奇偶行元素设定了不同的背景色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

九宫格

利用弹性布局实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>九宫格</title>
    <style>
        .parent {
            width: 600px;
            height: 600px;
            background-color: red;
            display: flex;
            flex-wrap: wrap; 
        }

        .child {
            width: 200px;
            height: 200px;
        }

        .child:nth-child(odd) {
            background-color: yellow;
        }

        .child:nth-child(even) {
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

</html>

利用浮动实现

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>九宫格</title>
    <style>
        .parent {
            width: 600px;
            height: 600px;
            background-color: red;
        }

        .child {
            width: 200px;
            height: 200px;
            float: left;
        }

        .parent::after {
			display:block;
            content: "";
            clear: both;
        }

        .child:nth-child(odd) {
            background-color: yellow;
        }

        .child:nth-child(even) {
            background-color: blue;
        }
    </style>
</head>

<body>
    <div class="parent">
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
        <div class="child"></div>
    </div>
</body>

</html>

九宫格