在网页设计中,经常用到图片来丰富页面内容,但是有时候我们希望让不同的图片不在同一行,怎么做呢?这就需要使用CSS来实现了。我们可以通过设置图片的display属性为block来让它变成块级元素,从而使
img { display: block; }
<img src="image1.jpg"> <img src="image2.jpg" class="new-line"> <img src="image3.jpg" class="new-line"> .new-line { display: block; }
<div class="image-list"> <img src="image1.jpg"> <img src="image2.jpg"> <img src="image3.jpg"> <img src="image4.jpg"> <img src="image5.jpg"> <img src="image6.jpg"> </div>
.image-list { display: flex; flex-wrap: wrap; } .image-list img { flex: 1; margin: 5px; }
粉丝
0
关注
0
收藏
0