CSS中有很多方法可以让图片并列排列,最常用的几种方法如下:.image-container { display: flex; flex-wrap: wrap; } .image-container
CSS中有很多方法可以让图片并列排列,最常用的几种方法如下:
.image-container { display: flex; flex-wrap: wrap; } .image-container img { width: 50%; height: auto; }
这段代码使用了flex布局,在图片容器中设置了display: flex,表示使用弹性布局。接下来使用flex-wrap: wrap实现图片的自动换行。在img选择器中设置了图片的宽度为50%(如果总共有4张图片,每行会排列2张),高度使用了自适应的height: auto。
另一种方法是使用css float属性:
.image-container { overflow: auto; width: 100%; } .image-container img { width: 50%; float: left; }
这段代码将图片容器的宽度设为100%,使用overflow: auto可以防止图片溢出容器。在img选择器中设置了图片宽度为50%,然后使用float: left将图片并列排列。需要注意的是,这种方法需要给图片容器设置清除浮动或在最后一个图片后面加一个clear元素来清除浮动。
粉丝
0
关注
0
收藏
0