css 如何将四幅图片分两行

在网页开发中，经常需要将多张图片按照一定的排列方式展示。在本文中，我们将介绍如何使用 CSS 将四幅图片分成两行。

  code>
   .container {
         display: flex;
         flex-wrap: wrap;
         justify-content: space-between;
         align-items: center;
   }
   .image {
         width: 48%;
         margin-bottom: 2%;
   }
        div class="container">
        img class="image" src="image1.jpg" />
        img class="image" src="image2.jpg" />
        img class="image" src="image3.jpg" />
        img class="image" src="image4.jpg" />
       /div>
     /code>
    

首先，我们创建一个 div 元素并为其添加 CSS 类名 "container"。接着，使用 flex 布局来控制子元素的排列方式。设置 flex-wrap 属性为 wrap，可以使元素在容器宽度不足时自动换行。justify-content 属性为 space-between 时，会让子元素平均分布在容器内，同时子元素之间的间隔会自动调整为相等的距离。align-items 属性为 center 时，会使子元素在垂直方向上居中对齐。

接着，我们为每张图片添加 CSS 类名 "image"，并为其设置一个宽度为 48%。这样做是为了使每行能够容纳两张图片，并在图片之间留出一定的间距。

最后，我们在 div 元素中添加四张图片，每张图片都具有相同的 CSS 类名 "image"。这样，四张图片就会按照我们设置的方式，分成两行展示。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！