css两个图片并排

CSS是网页界面美化的重要工具之一，今天我将向大家介绍如何用CSS让两张图片并排显示。

  .container{
        display:flex;
 /*使用flexbox布局*/  }
    .image{
        width:50%;
     /*每个图片占50%的宽度*/    float:left;
     /*左浮动*/    margin-right:10px;
 /*右侧加上一定的边距*/  }
    

如上述代码所示，我们使用flexbox布局来实现两张图片并排。首先给外部容器.container设置display:flex，这会让子元素成为一个flex容器。然后给每个图片的类名.image设置宽度为50%（占据一行的一半），设定左浮动，并给右侧留出一定的边距。

  div class="container">
        img class="image" src="image1.jpg">
        img class="image" src="image2.jpg">
      /div>
    

最后在HTML代码中使用上方给出的CSS类进行调用即可。我们创建一个包含两张图片的div> ，给每个图片设置相应的类名即可。

这样，两张图片就可以完美地并排显示在网页中了。如有需要，还可以通过更改CSS中的样式来改变图片间的距离、大小等。

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