CSS等分布局
文章描述：
在网站产品模块一排展示几个产品，产品的左右间距都是一样的，该怎么做呢？
html
在这里使用的是div标签布局产品，一排是四个产品。
<div class="container">
<div class="goods">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</div>float
float + padding + background-clip
css
这里使用浮动方式，给每个产品的宽度是四分之一，然后给每个产品设置不同的颜色，这里使用的是内边距控制左右间距。
.goods{ width:100%;overflow:hidden; }
.goods{margin-right:-20px;overflow:hidden}
.goods .item{float:left;height:100px;width:25%;padding-right:20px;box-sizing:border-box;background-clip:content-box; text-align:center; display:block; line-height:100px; }
.goods .item:nth-child(1){ background:lightblue; }
.goods .item:nth-child(2){ background:lightgreen; }
.goods .item:nth-child(3){ background:lightsalmon; }
.goods .item:nth-child(4){ background:pink; }float + margin + calc
css
这里也使用的浮动方式，给每个产品宽度为四分之一减去产品左右的间距。
.goods{overflow:hidden}
.goods{overflow:hidden;margin-right:-20px}
.goods .item{float:left;height:100px;width:calc(25% - 20px);margin-right:20px; text-align:center; line-height:100px; }
.goods .item:nth-child(1){ background:lightblue; }
.goods .item:nth-child(2){ background:lightgreen; }
.goods .item:nth-child(3){ background:lightsalmon; }
.goods .item:nth-child(4){ background:pink; }在这里建议使用第二种布局方式，让浏览器自己计算左右宽度。
响应式布局我们可以参考：https://osvaldas.info/imitating-calc-fallback-fixed-width-sidebar-in-responsive-layout
发布时间：2021/08/11
发表评论