css 一行图片分散对齐

CSS一行图片分散对齐是一种常见的布局方式。通过CSS的flex和justify-content属性可以轻松实现。

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

该代码块将容器中的元素分散对齐。但是，如果在容器中有图片，可能会出现图片大小不同而导致显示效果不佳的情况。为了解决这个问题，可以使用以下代码来使所有图片具有相同的大小:

img {
  width: 100%;
  height: auto;
}

这将使容器中的所有图片具有相同的宽度，但是高度将根据图片的原始比例适当缩放。

现在，将所有图片设置为相同的大小之后，将它们放置在一个分散对齐的容器中就很容易了。

<div class="container">
  <img src="pic1.jpg" alt="">
  <img src="pic2.jpg" alt="">
  <img src="pic3.jpg" alt="">
  <img src="pic4.jpg" alt="">
</div>

以上代码将创建一个容器，其中包含四个图片。这些图片将基于宽度进行分散对齐，同时保持它们各自的高度。这是CSS一行图片分散对齐的简单方法。