今天我们来讲一下关于CSS中将图片分成两行的方法。如果你想要在网页上展示两排图片,可以使用CSS来实现。下面我们将会介绍两种方法。第一种方法是使用float属性。首先,在HTML文件中插入一组图片,然
<style> img { float: left; margin-right: 10px; margin-bottom: 10px; } img:nth-child(2n+1) { clear: both; } </style> <p> <img src="image1.jpg" alt="image1" /> <img src="image2.jpg" alt="image2" /> <img src="image3.jpg" alt="image3" /> <img src="image4.jpg" alt="image4" /> </p>
<style> .container { display: flex; flex-wrap: wrap; justify-content: center; } .item { width: 200px; height: 200px; margin: 10px; } </style> <div class="container"> <div class="item"><img src="image1.jpg" alt="image1" /></div> <div class="item"><img src="image2.jpg" alt="image2" /></div> <div class="item"><img src="image3.jpg" alt="image3" /></div> <div class="item"><img src="image4.jpg" alt="image4" /></div> </div>
粉丝
0
关注
0
收藏
0