css-部分移动端div间隙

CSS中，我们经常会遇到移动端div间隙的问题，这种问题一般是由于浮动、百分比、字体大小等引起的。下面我们来简单介绍一下处理div间隙的方法。

1.去除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和垂直对齐方式来去掉间隙。

综上所述，处理移动端div间隙问题有多种方法，需要根据具体情况选择合适方法，避免出现不必要的差错。