css三个并列图片如何设置

在网页设计中，插入图片是非常常见的操作。有时候我们需要将三个图片并排放置在一个位置上，给用户更好的体验。那么，在 CSS 中该如何设置呢？这里介绍一下三种方法。

第一种方式使用 float 属性。使用 float 属性可以让图片在同一行内并排排列，并且不会撑开整个容器。

img {
  float: left;
  margin-right: 20px;
} 

第二种方式使用 display:inline-block 属性。display:inline-block 可以将元素设置为行内块级元素，可以保持元素的行内特性同时拥有块级元素的特性，这样就可以让三张图片水平并列显示。

img {
  display: inline-block;
  width: 32%;
  margin-right: 1%;
  vertical-align: top;
} 

第三种方式使用 Flex 布局。Flex 布局是 CSS3 新增的一种弹性盒子模型，可以方便灵活地对容器内的子元素进行位置排列。在 Flex 布局中，设置 align-items: center 让三张图片居中，在设置 flex 属性来控制图片显示效果。

.container {
  display: flex;
  align-items: center;
}

img {
  flex: 1;
  margin: 0 10px;
  max-width: 30%;
} 

这就是三种并排图片的设置方法，具体情况可以根据自己的实际需求进行选择。使用这些方法可以使我们的网站更加美观、易读、易懂。