页面中有间隔的方格布局如何完美实现方法

零五零八

方格中间有一定的间隙，间隙是固定的。应该如何布局会更加完美呢，比如要保证在布局完成的情况下，可以快速的添加一个元素依然保持这样的布局。以及当出现第二行的时候，这样的布局依然能够不受影响。又不用修改太多的内容。


设置宽为100%和块元素的默认宽度


现在在这里说一个问题，就是块元素的宽度默认是占满一行，我们很容易和给元素设置100%混淆。其实呢，这两个虽然表现上很容易让我们以为他们展现的效果是一样的，因为这两种方式都是占满了父元素。但是他们之间还是有很大的区别的。
他们的区别主要在于元素的宽度是随着什么而变化的，如果设置100%的话，那么该元素的width始终是和父元素保持一致的，给该元素设置的margin是不会影响该元素width变化的。当然仅有父元素的宽度会影响该元素的width变化。如果不设置宽的话，块元素是独占一行的，那么该元素的width，不仅受父元素的影响，也受该元素的margin的影响。

独占一行的块元素的宽设置margin的影响


记住以下两条规律

• 当给一个未设置宽的块级元素，设置了margin（水平方向）的话，那么margin值（正值）加上改元素的width的和等于父元素的宽度
• 当给一个未设置宽的块级元素，设置了margin（水平方向）的话，那么margin值（负值）刚好是该元素的宽度超出父元素的距离
  

如下图所示：
  规律1示例：
                                 
          规律1示例：
                                 
解决方案


  划分平均区域
  首先在一个横向区域，平分了5份，且横向排列，那么我们采用浮动的横向排列，且平均把每个元素设置成20%。

1. <ul class="list">
   
2.   <li></li>
   
3.   <li></li>
   
4.   <li></li>
   
5.   <li></li>
   
6.   <li></li>
   
7. </ul>
   

复制代码

1. .list{
   
2. overflow: hidden;
   
3. }
   
4. .list li{
   
5. width: 20%;
   
6.     height: 100px;
   
7.     float: left;
   
8. }
   

复制代码

在每个区域中放置内容，通过margin-right隔出间隔

1. <ul class="list">
   
2.   <li>
   
3.    <div class="content"></div>
   
4.   </li>
   
5.   <li>
   
6.    <div class="content"></div>
   
7.   </li>
   
8.   <li>
   
9.    <div class="content"></div>
   
10.   </li>
    
11.   <li>
    
12.    <div class="content"></div>
    
13.   </li>
    
14.   <li>
    
15.    <div class="content"></div>
    
16.   </li>
    

复制代码

1. .list{
   
2. overflow: hidden;
   
3. }
   
4. .list li{
   
5. width: 20%;
   
6.     height: 100px;
   
7.     float: left;
   
8. }
   
9. .content{
   
10. margin-right: 10px;
    
11. }
    

复制代码

此时我们可以想象到，最后一个元素还多了一个10px的间距，那么最后一步就是如何解决这个间距的问题。


拉伸父元素，隐藏尾部的间隙


我们给list再套一个元素，让list在其父元素下拉伸，刚好隐藏掉多余的部分。

1. <div class="wrapper">
   
2.   <ul class="list">
   
3.     <li>
   
4.       <div class="content"></div>
   
5.     </li>
   
6.     <li>
   
7.       <div class="content"></div>
   
8.     </li>
   
9.     <li>
   
10.       <div class="content"></div>
    
11.     </li>
    
12.     <li>
    
13.       <div class="content"></div>
    
14.     </li>
    
15.     <li>
    
16.       <div class="content"></div>
    
17.     </li>
    
18.   </ul>
    

复制代码

1. .wrapper{
   
2. width: 800px;
   
3.     overflow: hidden;
   
4. }
   
5. .list{
   
6. overflow: hidden;
   
7.     margin-right: -10px;
   
8. }
   
9. .list li{
   
10. width: 20%;
    
11.     height: 100px;
    
12.     float: left;
    
13. }
    
14. .content{
    
15. margin-right: 10px;
    
16. }
    

复制代码

可以查看实际效果，最终能实现我们开头所展示的效果！且这种布局方式有很多的扩展性，如果一行是4个，那么只需要把每个元素的宽设置为 25%,且在元素的个数中减去一个就行。