纯css九宫格布局排版

<title></title>

<style type="text/css">

* {

padding: 0;

margin: 0;

}

  body { text-align: center; background:#ddd; }

div {

width: 170px;

margin: 100px auto;

}

a {

float: left;

width: 50px;

height: 50px;

border: solid 1px #000;

display: block;

line-height: 50px;

_line-height: 40px;

text-align: center;

margin: 0 -1px -1px 0;

z-index: 1;

position: relative;

}

a:hover {

border-color: red;

z-index: 2;

}

  img{ width:50px; height:50px;}</style>

<div>

<a href="#">1</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> <a href="#">7</a> <a href="#">8</a> <a href="#">9</a></div>

原文：http://www.zaole.net/demo/20150302331.html

本文转自  小旭依然  51CTO博客，原文链接:http://blog.51cto.com/xuyran/1785148