几个div并列显示效果消除之间的间隔
今天在做一个静态页面时，头部的广告条是很大一张图片，考虑到网页访问时的加载速度，因此需要把一幅图拆成几个尺寸较小的图片来作为背景图，但是采用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并列显示效果消除之间的间隔的更多相关文章
- 标签设置为inline-block后，如何消除标签之间的间隔。
标签设置为inline-block后,如何消除标签之间的间隔. 例如: <div> <ul> <li><a href="#">学习& ...
- 消除两个inline-block元素之间的间隔
发现问题 两个inline-block元素之间的间隔.如下图 期望 消除两个inline-block元素之间的间隔. 解决方法 1.父元素字体大小设置为0 间隔的形成是非元素标签形成的 /** 方案1 ...
- 网页布局 CSS实现DIV并列等高
同事去笔试遇到的问题 要求3列div根据内容的变化通过css实现等高 效果图: 原理: 同列的div设置一个父级 overflow:hidden 超出部分隐藏 给同列的div设置css margin- ...
- [Flex] PopUpButton系列 —— 设置弹出菜单与主按钮之间的间隔
<?xml version="1.0" encoding="utf-8"?><!--设置弹出菜单与主按钮之间的间隔 PopUpButtonPo ...
- SQL SERVER数据库，按年、月、日、时、分、秒计算两个时间字段之间的间隔时间样例
使用DATEDIFF(取值,时间字段1,时间字段2) 举例: SELECT DATEDIFF(YEAR,DRYSJ,DCYSJ),* FROM YXHIS2019..TBZYBR2019 --SQL ...
- 巧用android:divider属性设置LinearLayout中元素之间的间隔
如上图,要想实现3个button线性排列并且使它们的大小相同.间隔相等.而且整体填充满整个linearlayout,我们一般的做法是在每两个button之间放一个固定宽度的view,然后设置butto ...
- display:inline-block的div 与 display:block的div之间有间隔问题（div与div之间有间隔的可能性）
首先看一下我出现的问题如下图: 如上图所示,我的导航栏是由三部分组成的,三部分样式如下: .logo{ /*红框*/ position: relative; display: inline-block ...
- 关于li标签之间的间隔如何消除！
问题:li标签用了display:inline之后虽然成功的合并在一行,但是li标签之间出现了间距. 原因:按enter键换行之后li标签之间存在着空格,正是这些空格占据了li标签之间的空间. 解决方 ...
- mini-tabs多个div并列,并可隐藏某个div
<div class="mini-tabs" activeIndex="0" id="tabs"> <div title= ...
随机推荐
- RPD Volume 172 Issue 1-3 December 2016 评论03
Using Stable Free Radicals to Obtain Unique and Clinically Useful Data In Vivo in Human Subjects Abs ...
- HTTP隧道工具HTTPTunnel
HTTP隧道工具HTTPTunnel 在很多服务器上,防火墙会限制主机的出站流量,只允许80之类的端口.如果要使用其他端口,只能通过HTTP隧道方式实现.Kali Linux提供一款HTTP隧道工 ...
- codevs与noi做题改错本目录
从2016.2.13开始: 1． 排序超时的问题---------目录:-测试习题 2． 超高精度乘法超时问题-----------目录:高精度计算 算法:快速傅里叶算法. 压位算法 3． 高精度 ...
- iOS开源项目阅读整理
精读过的开源项目,随时整理,随时更新,本文只记录项目地址,名称和内容,不发表心得. 1.AFNetWorking iOS人都知道,不细诉. 2.iCarousel 旋转木马,选项卡很不错的UI解决方案 ...
- maven将jar文件加入到maven库
mvn install:install-file-DgroupId=包名-DartifactId=项目名-Dversion=版本号-Dpackaging=jar-Dfile=jar文件所在路径 1,本 ...
- RxJava 1.x 理解-2
给RxJava 加入线程控制 -- Scheduler 在 RxJava 1.x 理解-1 中,我们说到了RxJava的简单用法,但是这还远远不够,因为这简单用法是在同一个线程中使用的.比如我们需要在 ...
- Dedecms getip()的漏洞利用
flyh4t在非安全发布了dedecms getip()的注射漏洞,漏洞本身的成因没什么好说的老掉牙的X-Forwarded-For的问题,我想这个漏洞很多人都找到了,不过这个漏洞的利用有个地方还是可 ...
- spring注入之使用标签 @Autowired @Qualifier
使用标签的缺点在于必需要有源代码(由于标签必须放在源代码上),当我们并没有程序源代码的时候.我们仅仅有使用xml进行配置. 比如我们在xml中配置某个类的属性 <bea ...
- 二分求幂 - A^B（王道*）
题目描述: 求A^B的最后三位数表示的整数,说明:A^B的含义是“A的B次方” 输入: 输入数据包含多个测试实例,每个实例占一行,由两个正整数A和B组成(1<=A,B<=10000),如果 ...
- ZT:有些人，活了一辈子，其实不过是认真过了一天，其余时间都在重复这一天而已
出处:http://news.163.com/17/1011/19/D0G7UEDS0001982T.html 有些人,活了一辈子,其实不过是认真过了一天,其余时间都在重复这一天而已,也有人每天不重样 ...