在CSS中,我们可以使用Flexbox布局或者Grid布局来实现两排图片排列的效果。
使用Flexbox布局
首先,我们需要给包裹图片的容器设置display: flex,并且把图片的宽度设为百分比。
.container { display: flex; flex-wrap: wrap; } .container img { width: 50%; }
这里我们使用了flex-wrap: wrap属性来让图片在容器中自动换行。现在,我们放置两张图片到容器中:
使用Grid布局
另一种方法是使用CSS Grid布局。我们需要创建一个网格布局,并且把每个图片放在不同的单元格中。
.container { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 10px; } .container img { width: 100%; }
这里,我们使用了grid-template-columns属性来创建两个等宽的列,并且使用grid-gap属性来设置列之间的间隙。现在,我们放置两张图片到容器中:
使用CSS的Flexbox和Grid布局可方便的实现两排图片排列的效果,具体应用需按需使用,选择适合的布局方式来达到理想的效果。