版权声明:本文为博主原创文章未经博主允许不得转载。 /u/article/details/
电商网站经常会出现如下布局来展示商品图片每行4个,每个和每个之间有20px的距离两端对齐,假设總宽度为500px
说明:每个大的item宽度25%那么4个正好排成一行,item里面的div右边距20px最后设置最大的包裹div右边距-20px,使右边界对齊
说明:使用css3新属性calc布局(注意不同浏览器的兼容前缀)
说明:使用flex布局子元素间隔且两端对齐即可(注意不同浏览器的兼容前綴)
说明:使用网格布局,子元素间隔且两端对齐即可(注意不同浏览器的兼容前缀)