今天在做一个静态页面时，头部的广告条是很大一张图片，考虑到网页访问时的加载速度，因此需要把一幅图拆成几个尺寸较小的图片来作为背景图，但是采用div来布局时，出现了div不能显示在一行的情况，所以开始想到用display:inline-block来处理，这样是显示到一行了，但是两个div之间有间隔，于是又想到直接用marg-left：-xxpx，将其拖过去，但是在一个浏览器中可以，一旦换了一个浏览器就不行了，特别是ie，才发现这种方法太不好了，于是，后来用了float方法来处理，不再用margin负值将其拖过去，直接上代码：

不加float时：

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style>

        body{

            margin:0;

            padding:0;

        }

        .main{

             width:600px;

            overflow: hidden;

            height:342px;

            margin:0;

            padding:0;

            background: red;;

        }

        .cnt{

            width:182px;

            height:342px;

            background: red;

            display: inline-block;

        }

        .fst{

            background: url(img/1.jpg) no-repeat;

        }

        .sec{

            background: url(img/2.jpg) no-repeat;

        }

        .trd{

          background: url(img/3.jpg) no-repeat;

         }

    </style>

</head>

<body>

<div class="main">

    <div class="cnt fst"></div>

    <div class="cnt sec"></div>

   <div class="cnt trd"></div>

</div>

</body>

</html>

结果：

这是没有向.cnt中添加float:left时结果，添加之后：如下所示：

<!DOCTYPE html>

<html>

<head>

    <title></title>

    <style>

        body{

            margin:0;

            padding:0;

        }

        .main{

             width:600px;

            overflow: hidden;

            height:342px;

            margin:0;

            padding:0;

            background: red;;

        }

        .cnt{

            width:182px;

            height:342px;

            background: red;

            display: inline-block;

            float: left;

        }

        .fst{

            background: url(img/1.jpg) no-repeat;

        }

        .sec{

            background: url(img/2.jpg) no-repeat;

        }

        .trd{

          background: url(img/3.jpg) no-repeat;

         }

    </style>

</head>

<body>

<div class="main">

    <div class="cnt fst"></div>

    <div class="cnt sec"></div>

   <div class="cnt trd"></div>

</div>

</body>

</html>

　　结果为：

如果是竖着排列的两个div，为了消除他们之间的间隔，可以使用div{margin:0;padding:0}来进行设置，因为每个浏览器都有一套自己的方式来解析网页，div内部存在着内边距和外边距，所以可以先清除边距来消除div之间的间隔。

几个div并列显示效果消除之间的间隔的更多相关文章

  1. 标签设置为inline-block后，如何消除标签之间的间隔。

    标签设置为inline-block后,如何消除标签之间的间隔. 例如: <div> <ul> <li><a href="#">学习& ...

  2. 消除两个inline-block元素之间的间隔

    发现问题 两个inline-block元素之间的间隔.如下图 期望 消除两个inline-block元素之间的间隔. 解决方法 1.父元素字体大小设置为0 间隔的形成是非元素标签形成的 /** 方案1 ...

  3. 网页布局 CSS实现DIV并列等高

    同事去笔试遇到的问题 要求3列div根据内容的变化通过css实现等高 效果图: 原理: 同列的div设置一个父级 overflow:hidden 超出部分隐藏 给同列的div设置css margin- ...

  4. [Flex] PopUpButton系列 —— 设置弹出菜单与主按钮之间的间隔

    <?xml version="1.0" encoding="utf-8"?><!--设置弹出菜单与主按钮之间的间隔 PopUpButtonPo ...

  5. SQL SERVER数据库，按年、月、日、时、分、秒计算两个时间字段之间的间隔时间样例

    使用DATEDIFF(取值,时间字段1,时间字段2) 举例: SELECT DATEDIFF(YEAR,DRYSJ,DCYSJ),* FROM YXHIS2019..TBZYBR2019 --SQL ...

  6. 巧用android:divider属性设置LinearLayout中元素之间的间隔

    如上图,要想实现3个button线性排列并且使它们的大小相同.间隔相等.而且整体填充满整个linearlayout,我们一般的做法是在每两个button之间放一个固定宽度的view,然后设置butto ...

  7. display:inline-block的div 与 display:block的div之间有间隔问题（div与div之间有间隔的可能性）

    首先看一下我出现的问题如下图: 如上图所示,我的导航栏是由三部分组成的,三部分样式如下: .logo{ /*红框*/ position: relative; display: inline-block ...

  8. 关于li标签之间的间隔如何消除！

    问题:li标签用了display:inline之后虽然成功的合并在一行,但是li标签之间出现了间距. 原因:按enter键换行之后li标签之间存在着空格,正是这些空格占据了li标签之间的空间. 解决方 ...

  9. mini-tabs多个div并列,并可隐藏某个div

    <div class="mini-tabs" activeIndex="0" id="tabs"> <div title= ...

随机推荐

  1. [BZOJ3206][APIO2013]道路费用(最小生成树)

    3206: [Apio2013]道路费用 Time Limit: 20 Sec  Memory Limit: 128 MBSubmit: 568  Solved: 266[Submit][Status ...

  2. 【博弈论】poj2484 A Funny Game

    如果当前状态可以根据某条轴线把硬币分成两个相同的组,则当前状态是必败态. 因为不论在其中一组我们采取任何策略,对方都可以采取相同的策略,如此循环,对方必然抽走最后一枚硬币. 因为我们先手,因此抽完后盘 ...

  3. 小白的Python之路 day4 不同目录间进行模块调用(绝对路径和相对路径)

    一.常用模块调用函数功能解释 1.__file__ 功能:返回自身文件的相对路径 你从pycharm的执行结果可以看出,在pycharm执行atm.py文件时,是从绝对路径下去执行的,而你从cmd下去 ...

  4. 踩的ssh坑

    先说下事情的起因,手贱删掉了~/.ssh下的所有文件,包括authorized_keys,id_rsa,id_rsa.pub,以及known_hosts.其实,这四个文件本来就是没有的,id_rsa和 ...

  5. HTML5 Boilerplate笔记(2)(转)

    最近看到了HTML5 Boilerplate模版,系统的学习与了解了一下.在各种CSS库.JS框架层出不穷的今天,能看到这么好的HTML模版,感觉甚爽.写篇博客,推荐给大家使用.   一:HTML5 ...

  6. 魅族 -- 禁止D及以下级别LOG的输出

    真机调试时:Log.d()打印不出信息,模拟器可以. 使用的手机:魅族. 状况:禁止D及以下级别LOG的输出. PS.Log.d("h_bl", "进入执行") ...

  7. ios－真机调试出错信息

    更新证书错误Code Sign error: Provisioning profile ‘XXXX'can't be found                   在Xcode中当你在更新了你得证书 ...

  8. ORA-12537：TNS：连接关闭 -------数据库最大连接数问题

    问题: 我自己用PLSQL登录实验,我也登陆不了,可是让同事实验,他一会能够登录,一会不能够登录.应用还是能够正常访问,只是PLSQL登录异常. 分析: 基于这种情况去百度,有的说是配置文件有问题,有 ...

  9. Go测试,功能测试,性能测试,测试辅助,go test 工具,高级测试,IO相关测试,黑盒测试,HTTP测试,进程测试

    go命令教程: http://wiki.jikexueyuan.com/project/go-command-tutorial/0.5.html Go测试 第一个测试 “Hello Test!” 首先 ...

  10. Android--使用XMLPull解析xml

    在Android中极力推荐的xmlpull方式解析xml.xmlpull不只能够使用在Android上.相同也适用于javase,但在javase环境下.你须要自己去获取xmlpull所依赖的类库. ...