等分布局的常见问题

横向等分布局是一个很常见的布局，按照常规思路都是使用百分比解决，比如使用三个div，每个div设置宽度为33.3%，display设置成inline-block，代码如下：

.inner {
    width:33.33%;
    height:300px;
    display:inline-block;
    outline:solid 1px blue;
}

执行这段代码，我们会看到，div并非紧挨着，中间有空白，这是为什么呢？原因是我们代码格式中换行和空格被HTML当成了空格文本，和inline-block混排了，解决方案有以下几种：

1. 1. 直接删除HTML中的空格和换行，改成如下：

此方法的缺点是影响了代码的可读性，

1. 将外层div的font-size设置为0

   .inner {
       width:33.33%;
       height:300px;
       display:inline-block;
       outline:solid 1px blue;
       font-size:30px;
   }
   .outer {
       font-size:0;
   }
   

   在某些浏览器中，因为像素计算精度问题，还是会出现换行，为了兼容老的浏览器，我们其实可以给outer元素设置一个宽度，然后在给最后一个div加上一个负的右margin就可以兼容老浏览器了

       .outer {
           font-size: 0px;
       }
   
       .inner {
           width:33.33%;
           height:300px;
           display:inline-block;
           outline:solid 1px blue;
       }
   
       .inner:last-child {
           margin-right:-5px;
       }	
   

2. 还有一个方法可以不用设置外层的font-size,给非最后子元素添加一个负数的右边距

   	    .inner {
   	        width:33.33%;
   	        height:300px;
   	        display:inline-block;
   	        outline:solid 1px blue;
   	    }
   	
   	    .inner:not(last-child) {
   	        margin-right:-5px;
   	    }
    	

Tagged as: 布局