主页 > 教程合集 > Html/css >

CSS实现自适应九宫格布局(完整方法大全)

时间:2019-03-07 阅读:0

看到微博和朋友圈都实现了图片九宫格,曾经有次面试也问到了九宫格这个问题,当时想到的是先固定每个单元格的宽高,然后进行浮动。今天想折腾一下,实现自适应父元素宽度的布局。这次我只写了四种方式去实现九宫格,算上inline-block的话就是五种了。

CSS实现自适应九宫格布局(完整方法大全)

首先要注意的是九宫格容器是宽高相等的正方形,并且是自适应的,这里关键是实现宽高相等,有些人想到了相对视口宽度,但是它是相对于屏幕可见宽度来设置的,并且会忽略滚动条的宽度,所以这是不可行的。

这里我用一种变通方法,看代码:

一、FlexBox

HTML代码:


<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>
 

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%; /* 铺满父元素容器,这时候宽高就始终相等了 */
}
.square-inner>li{
    width: calc(98%/ 3); /* calc里面的运算符两边要空格 */
    height: calc(98%/ 3);
    margin-right: 1%;
    margin-bottom: 1%;
    overflow: hidden;
}
 

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


.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;
}
 

CSS实现自适应九宫格布局(完整方法大全)

FlexBox实现九宫格效果预览

二、Grid

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

HTML代码:


<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>
 

CSS代码:


.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%);
}
 

CSS实现自适应九宫格布局(完整方法大全)

Grid实现九宫格效果预览

三、Float

浮动实现九宫格就不多说了,原理同上。

HTML代码:


<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>
 

CSS代码:


.float::after{
    content: "";
    display: block;
    clear: both;
    visibility: hidden;
}
.float>li{
    float: left;
    background-color: #42a59f;
    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;
}
 

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

CSS实现自适应九宫格布局(完整方法大全)

Float实现九宫格效果预览

四、Table

HTML代码:


<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>
 

CSS代码:


.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: #889ed8;
    overflow: hidden;
}
 

CSS实现自适应九宫格布局(完整方法大全)

Table实现九宫格效果预览

说下用表格实现九宫格有哪些瑕疵:

最后一行最后一列的单元格宽高与前面的不一致,虽然相差不大,但是还是有差异的;

与前面的两种方法不同,table单元格之间的间隔是利用border-spacing属性实现的,且不支持百分比,单元格四周都有类似margin的外边距效果,如下图。

CSS实现自适应九宫格布局(完整方法大全)

分析

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

本站所有资源均在Resource资源站有售,你可以点击》》Resource《《进入资源站自助购买,也可以扫描以下店铺二维码直接选购,自动极速发货

余斗微信二维码

扫描微信加好友咨询
了解更多

余斗淘宝店铺二维码

淘宝扫描二维码购买
自动发货

余斗余斗
  • 版权声明:原创文章由发表在Html/css分类下,2019-03-07最后更新,转载注明出处。

相关推荐

返回顶部