css 图片均匀分布显示

在网页设计中，经常需要将多张图片均匀地分布在页面中，CSS提供了多种方法实现这一功能。

首先，可以使用CSS的float属性将图片向左或向右浮动，形成水平排列的效果。同时，可以设置margin-left或margin-right来调节图片之间的距离。

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

另一种方法是使用display: flex属性将图片容器设为弹性盒子（flexBox），然后使用justify-content: space-between使得图片均匀分布在容器中。同时，可以设置图片容器的padding属性来调节图片之间的距离。

.container {
  display: flex;
  justify-content: space-between;
  padding: 10px;
}

.container img {
  max-width: 100%;
  height: auto;
}

最后，还有一种方法是使用CSS的grid属性，将图片容器设为网格布局。通过设置grid-template-columns和grid-gap来实现均匀分布的效果。

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
  grid-gap: 10px;
}

.container img {
  max-width: 100%;
  height: auto;
}

无论使用哪种方法，均匀分布的图片可以使页面更加整洁美观。