css图片排列方式

<img src="image1.jpg">
<img src="image2.jpg">
<img src="image3.jpg">

[图片1]
[图片2]
[图片3]

img {
  display: inline; /* 或 inline-block */
  margin-right: 10px; /* 可选间距 */
}

[图片1] [图片2] [图片3]

img {
  float: left; /* 或 right */
  margin-right: 10px;
}
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

<div class="clearfix">
  <img src="image1.jpg">
  <img src="image2.jpg">
  <img src="image3.jpg">
</div>

.container {
  display: flex;
  gap: 10px; /* 图片间距 */
  flex-wrap: wrap; /* 换行（可选） */
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 3列 */
  gap: 10px; /* 图片间距 */
}

.container {
  column-count: 3; /* 分为3列 */
  column-gap: 10px;
}
img {
  display: inline-block; /* 确保图片在列内 */
  width: 100%; /* 填充列宽 */
}

.container {
  display: flex;
  flex-wrap: wrap;
}
img {
  flex: 1 1 calc(33.33% - 10px); /* 默认3列 */
  margin: 5px;
}
@media (max-width: 768px) {
  img {
    flex: 1 1 calc(50% - 10px); /* 平板改为2列 */
  }
}
@media (max-width: 480px) {
  img {
    flex: 1 1 100%; /* 手机改为1列 */
  }
}

.container {
  text-align: center; /* 父容器设置 */
}
img {
  display: inline-block;
  margin: 0 5px;
}

.container {
  display: flex;
  flex-direction: column; /* 垂直方向 */
  gap: 10px;
}