css 图片水平排列布局 |css让图片两端对齐

<style>
.img-container {
display: flex;
justify-content: center;
}
.img-container img {
margin: 0 10px;
max-width: 100%;
height: auto;
}
</style>
<div class="img-container">
<img src="image1.jpg" alt="图片1">
<img src="image2.jpg" alt="图片2">
<img src="image3.jpg" alt="图片3">
</div>

首先，大家创建一个容器DIV，给DIV定义一个类名img-container，这个DIV将包含所有的图片。然后在CSS中，大家使用了flex布局，并将justify-content属性设置为center，这将使得所有的图片在水平方向上居中排列。

而对于每个图片，大家也为其定义了一个类名img-container img，并设置了一些属性。图片使用了max-width属性，这将使得图片的宽度不超过其容器的宽度，并把其高度调整为自动。另外，大家为每个图片都设置了一个左右的margin值，这将在图片之间留出一些空白。

最后大家在img-container中插入多个图片元素，这些元素将使用大家在CSS中设置的样式进行布局。这种方式的好处是，如果大家想要修改样式，只需要修改CSS，而不需要改变HTML代码。