简单的九宫格布局

最新推荐文章于 2024-07-04 23:27:33 发布

活着就得有野心

最新推荐文章于 2024-07-04 23:27:33 发布

阅读量775

点赞数

本文链接：https://blog.csdn.net/huoniu007/article/details/49529749

版权

本文展示了两种九宫格布局方案，其中布局二具有良好的各浏览器兼容性，而布局一在IE6下存在兼容问题。通过这两种方法，可以实现稳定的九宫格展示效果。

摘要由CSDN通过智能技术生成

一、效果图：

二、布局一（IE6下兼容有问题）

 
       01
       <!DOCTYPE html>
     
       02
       <html>
     
       03
       <head>
     
       04
       <meta charset="utf-8">
     
       05
       <title>九宫格布局</title>
     
       06
       <meta http-equiv="X-UA-Compatible" content="IE=edge">
     
       07
       </head>
     
       08
       <body>
     
       09
       <html>
     
       10
       <head>
     
       11
       <style type="text/css">
     
       12
       body{margin:0;padding:0;}
     
       13
       .grid_wrapper{
        
       14
           width: 170px;
     
       15
           height: 170px;
     
       16
           margin-left: auto;
     
       17
           margin-right: auto;
     
       18
       }
     
       19
       .grid{
        
       20
           margin-left: 5px;
     
       21
           margin-top: 5px;
     
       22
       }
     
       23
       .grid:after{
        
       24
           content: ".";
     
       25
           display: block;
     
       26
           line-height: 0;
     
       27
           height: 0;
     
       28