CSS制作简单的无间隙格子

最新推荐文章于 2023-05-19 15:34:10 发布

weixin_30678821

最新推荐文章于 2023-05-19 15:34:10 发布

阅读量129

点赞数

原文链接：http://www.cnblogs.com/front-end1210/archive/2013/01/21/2869892.html

版权

CSS制作简单的无间隙格子

效果图：

方案:

对每个格子设置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 阅读( ...) 评论( ...) 编辑收藏

转载于:https://www.cnblogs.com/front-end1210/archive/2013/01/21/2869892.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30678821

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS制作简单的无间隙格子

CSS制作简单的无间隙格子效果图：方案:对每个格子设置margin-left和margin-bottom为负值，大小等于border的宽度，以解决重合边框变粗的问题，不需要进行取模运算。代码:<!doctype html>...
复制链接

扫一扫