自适应四方格子有这样一个设计稿，左右两边留白4px，中间留白10px，每张中的两张图片row是等宽的（即等分去掉spacing后的Width）一种方法是和设计者商量，把所有的具体尺寸都改成百分比尺寸。.这个布局不好写的主要原因是在宽度方面，百分比（50%）和实际尺寸（4px10px）混在一起，所以宽度自适应会比较困难。下面是严肃的写法：图片单位为float，宽度设置为50%，奇数单位margin-right设置为10px，偶数单位margin-right设置为-10px。父元素将左内边距设置为4px，将右内边距设置为14px。父元素的padding值正好是所有间距的总和，所以它的实际宽度的50%就是刚好满足要求的图片单元的宽度。偶数单元的负margin（-10px）和父元素的右padding（14px）会被中和成4px的右margin（其实是因为元素的负margin会让右边的元素移动向左并被它覆盖）。在实际操作中，做出来的图片可能不是很标准，所以我们需要做一些简单的容错，即图片以图片为单位垂直居中，图片为单位设置padding-top为百分比，即设计稿中的图片宽高比。这样即使图片有一些错误，也不会影响整体的布局。垂直居中的原则是top百分比的基数是父元素的基数，translate百分比的基数是元素本身。现实代码如下
