块与块排版有缝隙解决方案
来源:互联网 发布:js 日期不支持 format 编辑:程序博客网 时间:2024/09/21 08:59
实现块与块排版有缝隙解决办法汇总
在display属性实现块之间的布局时候会发现,设置的两个块之间有缝隙。
基础代码:
<head>
<meta http-equiv="Content-Type"content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
.container{
width:500px;
height:500px;
background-color:#71b9fe;
}
p{
margin:0;
}
.left,.right{
display: inline-block;
font-size:10px;
}
.left{
width:200px;
height:200px;
background-color:skyblue;
}
.right{
width:200px;
height:200px;
background-color:palegreen;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
<p>我是谁</p>
</div>
<div class="right">
<p>有瑕疵</p>
<p>有瑕疵</p>
</div>
</div>
</body>
如下图:
上图中两个div块中明显有一条缝隙。
如何解决上面的问题:
(1)将第一个div标签结尾与第二个div标签开头首尾缩进一个空格。
代码如下:
<body>
<div class="container">
<div class="left">
<p>我是谁</p>
</div><div class="right">
<p>有瑕疵</p>
<p>有瑕疵</p>
</div>
</div>
</body>
代码中可以看出</div><div>直接没有空格
(2)在class名为left(左边)的那块设置margin-right: -5px;
或在class名为right(右边)的那块设置margin-left: -5px;
通过在两个块中更改它的margin属性来调整块的位置。
代码如下:
.left{
width:200px;
height:200px;
background-color:skyblue;
margin-right: -5px;
vertical-align: top;
}
或者:
.right{
width:200px;
height:200px;
background-color:palegreen;
margin-left: -5px;
}
两种实现达成的效果是一样的。
注意点:A、负margin是绝对标准的CSS
W3C标注过:对于margin属性来说,负值是被允许的。这是Nuff说的,查看这篇文章会有更多详细内容。
B、负maring不是一种hack方法
千真万确,不能因为缺乏对负marign的理解,或者因为它长得像hack,就认为它是一种hack方法。除非你是用来修复自己在其他地方造成的错误。
C、不脱离文档流
不使用float的话,负margin元素是不会破坏页面的文档流。所以如果你使用负margin上移一个元素,所有跟随的元素都会被上移。
D、完全兼容
所有现代浏览器都完全支持负margin(IE6在大多数情况下也支持)。
E、浮动会影响负margin的使用
负margin不是你每天都用的CSS属性,应用时应小心谨慎。
F、Dreamweaver不解析负margin
(3)设置整个“容器”的字体大小为0
代码如下:
.container{
width:500px;
height:500px;
background-color:#71b9fe;
font-size:0px;
}
以上三种方法都可实现将块与块之间的空隙消除。
效果如下:
- 块与块排版有缝隙解决方案
- cocos2dx TiledMap图块之间有缝隙
- vim 代码块排版
- 天空盒有缝隙解决方案
- 静态块与自由块
- 热块解决方案
- 块
- 块
- 块
- iframe与外层div之间有缝隙
- 检测块与块的碰撞和块和点
- java 代码块,构造代码块,与静态代码块
- 构造代码块与静态代码块(静态初始化块)
- 索引块与数据块的区别
- 宏块与宏块对(转)
- 静态代码块与初始化代码块
- “块定义”与“块参照”的区别
- 宏块与宏块对(附图
- 关于apt-get命令介绍及其参数使用
- PB程序中在普通激光打印机上实现条码打印
- 小记:关于Visual Studio编译链接出现控制台闪退的解决办法
- HAProxy
- spring手动设置事务回滚
- 块与块排版有缝隙解决方案
- Android popwindow 实现自定义数字键盘
- urllib
- 图像分割与FCN
- 基于51单片机的按键控制超声波测距及显示(带提示音)的实现
- Prototype框架:同时支持dubbo/spring cloud等各类SOA/RPC的新框架方案
- Conquer a New Region HDU
- (算法)FJ的字符串
- Swing编程之 如何在JTable中添加数据