如何实现九宫格

最新推荐文章于 2022-12-04 18:02:22 发布

郁美人

最新推荐文章于 2022-12-04 18:02:22 发布

阅读量1.4k

点赞数 1

分类专栏：前端开发文章标签： css html5 css3 html

原文链接：https://www.cnblogs.com/sunshq/p/10118425.html

版权

前端开发专栏收录该内容

16 篇文章 0 订阅

订阅专栏

九宫格容器是宽高相等的正方形，实现九宫格有几种方法，这里列举一二

一、用Grid实现

对于网格布局来说，grid 比 flex 更为方便，代码量更少，可以处理更为复杂的结构。
如以下代码

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>九宫格</title>
    <style type="text/css">
    .square{
        position: relative;
        width: 100%;
        height: 0;
        padding-bottom: 100%; /* padding百分比是相对父元素宽度计算的 */
        margin-bottom: 30px;
    }
    .square-inner{
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%; /* 铺满父元素容器，这时候宽高就始终相等了 */
    }
    .grid{
        display: grid;
        grid-template-columns: repeat(3, 1fr); /* 相当于 1fr 1fr 1fr */
        grid-template-rows: repeat(3, 1fr); /* fr单位可以将容器分为几等份 */
        grid-gap: 1%; /* grid-column-gap 和 grid-row-gap的简写 */
        grid-auto-flow: row;
    }
    .grid>div{
        color: #fff;
        font-size: 50px;
        line-height: 2;
        text-align: center;
        background: linear-gradient(to bottom, #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);
    }
    </style>
</head>
<body>
    <div class="square">
        <div class="square-inner grid">
            <div>1</div>
            <div>2</div>
            <div>3</div>
            <div>4</div>
            <div>5</div>
            <div>6</div>
            <div>7</div>
            <div>8</div>
            <div>9</div>
        </div>
    </div>
</body>
</html>

效果 grid九宫格

二、用Float实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>九宫格</title>
    <style type="text/css">
    .square{
      position: relative;
      width: 100%;
      height: 0;
      padding-bottom: 100%; /* padding百分比是相对父元素宽度计算的 */
      margin-bottom: 30px;
    }
    .square-inner{
      padding-left: 0;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; /* 铺满父元素容器，这时候宽高就始终相等了 */
    }
    .square-inner>li{
      width: calc(98% / 3);  /* calc里面的运算符两边要空格 */
      height: calc(98% / 3);
      margin-right: 1%;
      margin-bottom: 1%;
      overflow: hidden;
    }
    .float::after{
      content: "";
      display: block;
      clear: both;
      visibility: hidden;
    }
    .float>li{
      float: left;
      background-color: #a55f42;
      text-align: center;
      color: #fff;
      font-size: 50px;
      line-height: 2;
    }
    .float>li:nth-of-type(3n){
      margin-right: 0;
    }
    .float>li:nth-of-type(n+7){
      margin-bottom: 0;
    }

    </style>
</head>
<body>
    <div class="square">
        <ul class="square-inner float">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
    </div>
</body>
</html>

效果
Float九宫格
除了浮动，这里 li 也可以使用display: inline-block;实现同样的效果，不过要注意HTML代码非压缩情况下行块级元素之间会出现默认间隔，不同浏览器下表现还不一样，这时可以给父级元素设置font-size: 0;

三、用Table实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>九宫格</title>
    <style type="text/css">
    .square{
      position: relative;
      width: 100%;
      height: 0;
      padding-bottom: 100%; /* padding百分比是相对父元素宽度计算的 */
      margin-bottom: 30px;
    }
    .square-inner{
      padding-left: 0;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; /* 铺满父元素容器，这时候宽高就始终相等了 */
    }
    .square-inner>li{
      width: calc(98% / 3);  /* calc里面的运算符两边要空格 */
      height: calc(98% / 3);
      margin-right: 1%;
      margin-bottom: 1%;
      overflow: hidden;
    }
    .table{
      border-collapse: separate;
      border-spacing: 0.57em;
      font-size: 14px;
      empty-cells: hide;
      table-layout: fixed;
    }
    .table>tbody>tr>td{
      text-align: center;
      background-color: #88c4d8;
      overflow: hidden;
      color: #fff;
      font-size: 50px;
    }
    </style>
</head>
<body>
    <div class="square">
        <table class="square-inner table">
            <tbody>
              <tr>
                <td>1</td>
                <td>2</td>
                <td>3</td>
              </tr>
              <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
              </tr>
              <tr>
                <td>7</td>
                <td>8</td>
                <td>9</td>
              </tr>
            </tbody>
        </table>
    </div>
</body>
</html>

效果图
table九宫格
但是用表格实现九宫格有些瑕疵：

最后一行最后一列的单元格宽高与前面的不一致，虽然相差不大，但是还是有差异的；
table 单元格之间的间隔是利用border-spacing属性实现的，且不支持百分比，单元格四周都有类似margin的外边距效果。

四、用FlexBox实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>九宫格</title>
    <style type="text/css">
    .square{
      position: relative;
      width: 100%;
      height: 0;
      padding-bottom: 100%; /* padding百分比是相对父元素宽度计算的 */
      margin-bottom: 30px;
    }
    .square-inner{
      padding-left: 0;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%; /* 铺满父元素容器，这时候宽高就始终相等了 */
    }
    .square-inner>li{
      width: calc(98% / 3);  /* calc里面的运算符两边要空格 */
      height: calc(98% / 3);
      margin-right: 1%;
      margin-bottom: 1%;
      overflow: hidden;
    }
    .flex{
      display: flex;
      flex-wrap: wrap;
    }
    .flex>li{
      flex-grow: 1; /* 子元素按1/n的比例进行拉伸 */
      background-color: #4d839c;
      text-align: center;
      color: #fff;
      font-size: 50px;
      line-height: 2;
    }
    .flex>li:nth-of-type(3n){ /* 选择个数是3的倍数的元素 */
      margin-right: 0;
    }
    .flex>li:nth-of-type(n+7){  /* 选择倒数的三个元素，n可以取0 */
      margin-bottom: 0;
    }
    </style>
</head>
<body>
    <div class="square">
        <ul class="square-inner flex">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
            <li>5</li>
            <li>6</li>
            <li>7</li>
            <li>8</li>
            <li>9</li>
        </ul>
    </div>
</body>
</html>

效果图
Flexbox九宫格
使用Flex的一个好处是不用再担心高度塌陷的问题，而且还可以轻松实现子元素横向竖向甚至按比例伸缩扩展的布局。

分析

综上来看，个人认为 FlexBox 适合用于移动端，PC端 IE10 以下不支持；Grid网格布局比较方便，但是规范还未成熟，主流浏览器厂商尚未推广，不推荐使用在项目中；浮动和行块级式声明可以兼容到IE6，移动端和PC端支持的都不错；Table 因为实现有瑕疵所以不推荐使用。

郁美人

关注

1
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
如何实现九宫格

九宫格容器是宽高相等的正方形，实现九宫格有几种方法，这里列举一二一、用Grid实现对于网格布局来说，grid 比 flex 更为方便，代码量更少，可以处理更为复杂的结构。如以下代码<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>九宫格</...
复制链接

扫一扫

专栏目录