[分享]css中将图片分成两行

今天我们来讲一下关于CSS中将图片分成两行的方法。如果你想要在网页上展示两排图片，可以使用CSS来实现。下面我们将会介绍两种方法。第一种方法是使用float属性。首先，在HTML文件中插入一组图片，然...

今天我们来讲一下关于CSS中将图片分成两行的方法。如果你想要在网页上展示两排图片，可以使用CSS来实现。下面我们将会介绍两种方法。
第一种方法是使用float属性。首先，在HTML文件中插入一组图片，然后在CSS文件中将它们设置为float: left，这样图片就可以左对齐。接着，为了防止图片重叠，还需要设置一个margin值。最后，如果你想让第二排图片开始的位置与第一排对齐，可以使用clear:both来清除float属性。
下面是示例代码：

<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> 

第二种方法是使用flexbox布局。这种方法比起float属性更加灵活，而且可以实现更多的布局效果。首先，在CSS文件中将容器设置为display: flex，然后为了让图片在第一行显示，我们需要给它们的父元素设置flex-wrap属性为wrap。接着，我们可以使用允许图片换行的flex-wrap属性来放置第二排图片，同时还可以在容器中设置justify-content属性来控制图片的对齐方式。
下面是示例代码：

<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> 

这就是两种将图片分成两行的CSS方法。希望这篇文章对你有所帮助！