前端切图经常会遇到图片布局，初学者可能比较陌生。下面介绍两种常用的3行3列图片列表的图片切图方案：浮动布局展示：内联块布局首先，浮动布局的方法很简单。一般我会用ulli布局
然后给每个li元素设置一个宽度，向左浮动。这里每行显示3张图片，所以每张图片的宽度可以用百分比计算：100/3=33.3%。li{列表样式：无；向左飘浮;width:33.3%;/*三列图片排列*/}每个img标签的宽度设置为100%，占据li的整个宽度。为了防止图像变形，高度自适应li{list-style:none;向左飘浮;width:33.3%;/*三列图片排列*/}liimg{width:100%;}好了，来看看效果吧。为什么和我们想的不一样？此时列表令人困惑。别担心，这是因为图片的大小不同。如果项目中的图片大小相差太大，建议在父元素中设置一个高度，设置成beyondhidden。但如果图片大小相差不大，建议设置height:auto；达到高度适应的目的。li{列表样式：无；向左飘浮;width:33.3%;/*图片排列三列*/height:100px;/*图片大小不同时，设置一个高度*/overflow:hidden;/*BeyondHidden*/}嗯~差不多了作为我们的需要。此时，产品可能会要求您将图片上下居中。liimg{位置：相对；宽度：100%；top:50%;/*li高度的一半*/transform:translateY(-50%);/*自己上移50%*/}可能有同学会想到用margin-top代替top。这里需要注意的是，margin-top和margin-bottom的百分比一般是根据容器元素的宽度而不是高度来计算的。这里的填充是一样的。一个基本的三行三列的图片布局就基本完成了。但是注意，新手可能会忽略的一个隐藏问题：子元素浮动后父容器塌陷。有时这个特性会严重影响我们的布局。让我们通过在ulelement.red{width:100%;前后添加一个div元素来测试它。高度：30px；border:1pxsolidred;}.blue{宽度:100%;高度：30px；border:1pxsolidblue;}
