CSS制作简单的无间隙格子

冷不防 2021-10-25 15:12 198阅读 0赞

[CSS制作简单的无间隙格子][CSS]

效果图：

![Image 1][]

方案:

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

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

[CSS]: https://www.cnblogs.com/front-end1210/archive/2013/01/21/2869892.html
[Image 1]: 
[Learning Front-end Web]: https://www.cnblogs.com/front-end1210/
[Link 1]: https://i.cnblogs.com/EditPosts.aspx?postid=2869892

发表评论取消回复

表情：

评论列表（有 0 条评论，198人围观）

还没有评论，来说两句吧...

相关阅读

相关 html+css制作简单网页界面

一.运行效果如下 ![860e2d7eed2447d59f8984859bcd1191.png][] 二.HTML 2.1关于语义化标签 <section>

╰半夏微凉°/ 2024年02月20日 08:18/ 0 赞/ 68 阅读

相关 HTML+CSS+JavaScript制作简单页面

一效果图 ![31727094dfc342ca96cb21bb69f55fc0.png][] 二相关代码 2.1 index.html <!DO

骑猪看日落/ 2024年02月05日 20:31/ 0 赞/ 23 阅读

相关 HTML+CSS+JavaScript制作简单轮播图

一运行效果 ![721bb117cd414f3d9313eea5f305f665.png][]二图片资源 ![d5bf4e2be4834ba5bedac1b3

女爷i/ 2024年02月05日 13:56/ 0 赞/ 81 阅读

相关 CSS 三角形的制作

三角形的制作代码： <!DOCTYPE html> <html lang="en"> <head>

港控/mmm°/ 2022年12月29日 14:20/ 0 赞/ 209 阅读

相关最简单的css+js标签页效果制作

最简单的css+js标签页效果制作 > 之前见网上的标签页虽然效果很好，但是额外的代码太多，让人分不清写一个标签页究竟需要什么，所以我来写一个最简单的,其他效果你们可以自

系统管理员/ 2022年06月17日 03:59/ 0 赞/ 287 阅读

相关纯JS无间隙文字向上滚动代码

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xht

旧城等待，/ 2022年06月16日 09:14/ 0 赞/ 192 阅读

相关 CSS制作简单的无间隙格子

[CSS制作简单的无间隙格子][CSS] 效果图： ![Image 1][] 方案: 对每个格子设置margin-left和margin-bottom为负值，大小等于

冷不防/ 2021年10月25日 15:12/ 0 赞/ 199 阅读

相关 css - 三角形的制作

在我们写项目的时候会时不时的遇到需要一个三角形，这时会选择直接拿一张图片来代替，或者自己用css样式来画一个三角形，下面我来跟大家解释一下如何使用css样式来制作一个三角形

女爷i/ 2021年09月29日 14:46/ 0 赞/ 378 阅读

相关 JS 无间隙滚动封装

新建一个页面魔板：引入 JS 文件 <!DOCTYPE html> <html lang="en"> <head> <meta

小灰灰/ 2021年09月16日 03:24/ 0 赞/ 239 阅读

相关 CSS -img标签排列之间有间隙

前言 img标签排列之间在没有外边距的产生间隙解决方法方法一、在img标签的父级上写：font-size:0;

缺乏、安全感/ 2021年07月26日 15:23/ 0 赞/ 425 阅读