在网站设计中,经常需要用到图片排版。如果需要将两排图片变成两列图片,则需要使用CSS来实现。下面我们来介绍如何使用CSS来实现这个效果。 .img-box { display: flex; flex-
在网站设计中,经常需要用到图片排版。如果需要将两排图片变成两列图片,则需要使用CSS来实现。下面我们来介绍如何使用CSS来实现这个效果。
.img-box { display: flex; flex-wrap: wrap; } .img-item { width: 50%; box-sizing: border-box; padding: 10px; } .img-item img { max-width: 100%; }
首先,我们需要给包含图片的父容器添加CSS样式,这里我们使用flex布局,设置了flex-wrap为wrap,这样当图片排不下时,会自动换行。
接着,我们给每个图片容器添加CSS样式,设置了宽度为50%,这样就可以将两排图片变成两列图片了。我们还设置了盒模型为border-box,加了padding值,这样可以让图片与图片之间有一定的间隔。
最后,我们给图片设置了max-width限制,这样可以防止图片被拉伸变形。
这样,我们就完成了将两排图片变成两列图片的效果。
粉丝
0
关注
0
收藏
0