css平行添加多张图片

CSS可以让我们方便地添加多张图片在网页上，不需要再使用HTML标记一个个添加了。下面是一些实现多张图片平行添加的方法：

img {
      float: left;
     /* 让图片左浮动 */  margin-right: 20px;
 /* 增加图片之间的距离 */}

上面这段代码使用了CSS的浮动（float）属性让图片左浮动，这样图片就可以平行地排列在一行中了。同时，加上了一个 margin-right 属性，这样每张图片之间就会有20个像素的空间。如果需要添加更多的图片，只需要再复制一行img的代码即可。

还可以使用flexbox来实现多张图片平行添加：

.container {
      display: flex;
}
img {
      flex: 1;
     /* 让所有图片均分容器宽度 */  margin-right: 20px;
 /* 增加图片之间的距离 */}
img:last-child {
      margin-right: 0;
 /* 最后一个图片不需要右边距 */}
    

上述代码中，.container是一个包含所有图片的父容器，使用了CSS的 flexbox 布局让内部的图片均分容器宽度。同时，设置了 margin-right 属性来增加图片之间的距离。最后一个图片的 margin-right 设置为 0，这样最后一个图片就不会有右边距了。

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