实现九宫格

来源：互联网发布：MySQL 转为percona 编辑：程序博客网时间：2024/05/18 02:56

这里写图片描述
像这种，实现该九宫格。
外部的大小为120px，120px。边框为蓝色1px。
问题就每个相邻的小格子的边框不会自动重叠，比如这儿是1px，如果每个都设置为1px，那么相邻的格子边框就会出现2px的。
思路：
设置父元素的上方和左方的padding为1px；
即相当于里面的内容普遍就会像右下方偏移1px；
这时设置里面每一个的小格子的margin-top和margin-left都为-1px；但是格子的大小还需要设定，包含边框刚好每个40px；所以使用IE的盒子模型，box-sizing:border-box。
这时的每个格子都会在原始位置上普遍向左上移了一段距离。而且格子间的边框刚好重叠。

    <style type="text/css">    #content{        width: 120px;        height: 120px;        padding: 1px 0 0 1px;        box-sizing:border-box;    }    .divs{        width: 40px;        height: 40px;        float: left;        margin-top: -1px;        margin-left: -1px;        border:1px solid blue;        box-sizing:border-box;    }    </style></head><body><div id = "content">    <div class = "divs"></div>    <div class = "divs"></div>    <div class = "divs"></div>    <div class = "divs"></div>    <div class = "divs"></div>    <div class = "divs"></div>    <div class = "divs"></div>    <div class = "divs"></div>    <div class = "divs"></div></div>

阅读全文

0 0