前端开发

路漫漫其修远兮,吾将上下而求索

  博客园  :: 首页  :: 新随笔  :: 联系 :: 订阅 订阅  :: 管理

效果图:

方案:

对每个格子设置margin-left和margin-bottom为负值 ,大小等于border的宽度,以解决重合边框变粗的问题,不需要进行取模运算。

代码:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无间隙格子效果</title>
<style>
    *{margin:0; padding:0;}
    #wrapper{
        width:600px; 
        margin:0 auto;
        padding:10px;
    }
    .box {
        width:199px; 
        height:199px; 
        border:1px solid #999; 
        float:left; 
        margin-left:-1px; 
        margin-bottom:-1px;
    }
</style>
</head>

<body>
    <div id="wrapper">
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
    </div>
</body>
</html>

 

posted on 2013-01-21 15:48  Learning Front-end Web  阅读(543)  评论(0编辑  收藏  举报