html css多张图片并排

HTML 和 CSS 可以轻松地实现多张图片并排显示。你可以通过以下几个步骤来实现：

1. 创建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>

这里，`<div>` 包含了所有你想并排放置的 `<img>` 标签。

2. 使用CSS布局：

.image-container {
  display: flex; /* 设置容器为弹性布局 */
  flex-wrap: wrap; /* 如果一行放不下，换行显示 */
}

.image-container img {
  margin: 5px; /* 控制图片之间的间距 */
  max-width: 100%; /* 图片宽度不超过容器宽度 */
}

上述CSS设置会让`.image-container`内的图片水平排列，并允许它们在需要时自动换行。`max-width: 100%`确保每个图片不会超过其容器的宽度。