我之前写九宫格自适应布局的时候，每个格子是使用媒体查询器（@media）或者js动态设置css，根据不同的手机屏幕宽度，适配不同手机，但是这样有个很大的缺点，那就是移动端的屏幕尺寸太多了，就得写很多代码，才能实现我们想要的效果。

今天突发奇想，使用了纯css实现了我想要的效果，下面就和大家来分享，上代码;

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>九宫格</title>

        <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />

        <style type="text/css">

            a, body, center, cite, code, dd, del, div, dl, dt, em, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hr, html, img, input, label, legend, li, mark, ol, p, section, span, strong, textarea, time, ul, var input{

                margin: 0;

                border: 0;

                padding: 0;

                font-style: normal;

                color: #323232;

                box-sizing: border-box;

                -moz-box-sizing:border-box; /* Firefox */

                -webkit-box-sizing:border-box; /* Safari */

            }

            html,body{

                background: #fff;

            }

            ul{

                text-decoration: none;

                list-style-type: none;

            }

            .video_list>li{

                float: left;

                width: 32%;

                text-align: center;

                border: 1px solid #ccc;

                padding-top: 31%;

                margin-left: 1%;

                margin-top: 1%;

                position: relative;

            }

            .video_list>li>div{

                position: absolute;

                left: 0;

                top: 0;

                width: 100%;

                height: 100%;

                background-color: #09BE07;

            }

            .video_list>li>div>span{

                display: inline-block;

                margin-top: 50%;

                -webkit-transform: translateY(-50%);

                transform: translateY(-50%);

            }

        </style>

    </head>

    <body>

        <ul class="video_list">

            <li><div><span>1</span></div></li>

            <li><div><span>2</span></div></li>

            <li><div><span>3</span></div></li>

            <li><div><span>4</span></div></li>

            <li><div><span>5</span></div></li>

            <li><div><span>6</span></div></li>

            <li><div><span>7</span></div></li>

            <li><div><span>8</span></div></li>

            <li><div><span>9</span></div></li>

        </ul>

    </body>

</html>

　　里面包括了css的简单初始化，去除后，真正实现的代码没有几行。

如果我们放的是图片，那么就把span标签换成img标签，并且css给img加上width:100%;height:100%;就可以了

css实现九宫格图片自适应布局的更多相关文章

  1. CSS百分比padding实现比例固定图片自适应布局

    一.CSS百分比padding都是相对宽度计算的 在默认的水平文档流方向下,CSS margin和padding属性的垂直方向的百分比值都是相对于宽度计算的,这个和top, bottom等属性的百分比 ...

  2. CSS 负边距自适应布局

    单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head>     <meta charset="UTF-8"& ...

  3. CSS负边距自适应布局三例

    单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head> <meta charset=”UTF-8″> <title& ...

  4. css负边距自适应布局

    单列定宽单列自适应布局: <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> ...

  5. 使用CSS实现三栏自适应布局（两边宽度固定，中间自适应）

    来源:http://blog.csdn.net/cinderella_hou/article/details/52156333 所谓三列自适应布局指的是两边定宽,中间block宽度自适应.这道题在今年 ...

  6. 关于使用rem单位、css函数calc()进行自适应布局

    一.关于css中的单位 大家都知道在css中的单位,一般都包括有px,%,em等单位,另外css3新增加一个单位rem. 其中px,%等单位平时在传统布局当中使用的比较频繁,大家也比较熟悉,不过px单 ...

  7. CSS——background-size实现图片自适应

    在网页端,我们经常想让图片能够自适应拉伸缩放,使之可以完美的嵌入我们给定的容器里,比如div,button,input,下面我将用代码来说明如何实现这个功能! 一.div背景图自适应 如果知道图片都有 ...

  8. css设置背景图片自适应

      CreateTime--2017年12月25日16:36:07 Author:Marydon 控制背景图片100%自适应填充布局 /* 控制背景图片100%自适应填充布局 */ body{ bac ...

  9. css实现三栏自适应布局（两边固定，中间自适应）以及优缺点

    方法一:绝对定位(absolute + margin) 原理:给左右两边的元素设置absolute,这样左右两边的元素脱离标准文档流的控制,中间的元素自然会上来,然后给中间的元素设置margin留出左 ...

随机推荐

  1. 从PRISM开始学WPF（一）WPF-更新至Prism7.1

    原文:从PRISM开始学WPF(一)WPF-更新至Prism7.1 我最近打算学习WPF ,在寻找MVVM框架的时候发现了PRISM,在此之前还从一些博客上了解了其他的MVVM框架,比如浅谈WPF中的 ...

  2. c/c++容器操作

    C++中的容器大致可以分为两个大类:顺序容器和关联容器.顺序容器中包含有顺序容器适配器. 顺序容器:将单一类型元素聚集起来成为容器,然后根据位置来存储和访问这些元素.主要有vector.list.de ...

  3. 两种方法实现Python二分查找算法

    两种方法实现Python二分查找算法   一. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 arr=[1,3,6,9,10,20,30] def findnumber( ...

  4. Migrating from MapReduce 1 (MRv1) to MapReduce 2 (MRv2, YARN)...

    This is a guide to migrating from Apache MapReduce 1 (MRv1) to the Next Generation MapReduce (MRv2 o ...

  5. 引用外部静态库(.a文件）时或打包.a时，Category方法无法调用。崩溃

    我的这个是MJRefresh,学习打.a包Terminating app due to uncaught exception 'NSInvalidArgumentException', reason: ...

  6. Python 3基础教程22-单个列表操作

    本文来介绍列表的操作,先看看单个列表的操作,列表有多个方法.以下多行代码,建议你写一个方法,测试运行一个方法,不然看起来很乱. # 元组操作 x = [5,6,2,1,6,7,2,7,9] # app ...

  7. python 基础篇 04(列表 元组 常规操作)

    本节主要内容:1. 列表2. 列表的增删改查3. 列表的嵌套4. 元组和元组嵌套5. range 一. 列表1.1 列表的介绍列表是python的基础数据类型之一 ,其他编程语言也有类似的数据类型. ...

  8. python 基础篇03

    本节主要内容:1. python基本数据类型回顾2. int----数字类型3. bool---布尔类型4. str--- 字符串类型一.python基本数据类型1. int ==> 整数. 主 ...

  9. 使用CodeBlocks为你的程序添加程序文件图标和启动读入图标

    其实也非常简单,自己这两天用win32api做了一个小程序,可是发现图标却是dos的,太难看了,于是就想起以前学win32汇编时候用到的工具,ResEd,已经被我汉化了一些,估计有新的版本发布吧,但是 ...

  10. 爬取图片过程遇到的ValueError: Missing scheme in request url: h 报错与解决方法

    一 .scrapy整体框架 1.1 scrapy框架图 1.2 scrapy框架各结构解析 item:保存抓取的内容 spider:定义抓取内容的规则,也是我们主要编辑的文件 pipelines:管道 ...