css图片水平排列

要实现图片的水平排列，可以使用 CSS 的 flex 布局或者浮动（float）属性。

使用 flex 布局实现图片水平排列的示例代码如下：

HTML 代码：

<div class="image-container">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

CSS 代码：

.image-container {
  display: flex; /* 将容器设为 flex 布局 */
  justify-content: space-between; /* 使图片均匀分布在容器中 */
}

.image-container img {
  width: 30%; /* 设置图片宽度 */
}

使用浮动属性实现图片水平排列的示例代码如下：

HTML 代码：

<div class="image-container">
  <img src="image1.jpg" alt="Image 1">
  <img src="image2.jpg" alt="Image 2">
  <img src="image3.jpg" alt="Image 3">
</div>

CSS 代码：

.image-container {
  overflow: hidden; /* 清除浮动 */
}

.image-container img {
  float: left; /* 将图片向左浮动 */
  width: 30%; /* 设置图片宽度 */
  margin-right: 2%; /* 设置图片间距 */
}