CSS中,我们经常会遇到移动端div间隙的问题,这种问题一般是由于浮动、百分比、字体大小等引起的。下面我们来简单介绍一下处理div间隙的方法。
<div>1</div> <div>2</div>
这种情况下两个div之间会有一个空格,可以通过去掉空格的方式解决。
<div>1</div><div>2</div>
2.给父元素加font-size:0
<div class="parent"> <div class="child-1">1</div> <div class="child-2">2</div> </div>
.parent{ font-size:0; } .child-1,.child-2{ font-size:16px; }
这种情况下父元素会有一个默认的字体大小造成间隙,给父元素加上font-size:0会去掉这个间隙。
3.使用float浮动
<div class="parent"> <div class="child-1">1</div> <div class="child-2">2</div> </div>
.parent{ overflow: hidden;/*清除浮动*/ } .child-1,.child-2{ float: left; width: 50%; }
这种情况下给子元素加上浮动会去掉间隙,父元素的overflow属性也要设为hidden来清除浮动。
4.使用line-height
<div class="parent"> <div class="child-1">1</div> <div class="child-2">2</div> </div>
.parent{ line-height: 0; } .child-1,.child-2{ line-height: 1.5;/*根据字体大小调整*/ display: inline-block; vertical-align: top; width: 50%; }
这种情况下可以通过给父元素加上line-height:0,然后给子元素加上inline-block和垂直对齐方式来去掉间隙。