网页如何做图片左右互换

实现图片左右互换的方法通常有两种：

1. 使用 CSS float 属性

可以将两张图片都设置为 float:left 或 float:right，然后在需要互换位置的时候，只需要将其 float 属性相反即可，例如：

<div class="img-container">
  <img src="left-img.jpg" class="left">
  <img src="right-img.jpg" class="right">
</div>

/* CSS */
.left {
  float: left;
}
.right {
  float: right;
}

然后在需要互换位置时，只需要交换两个图片的 class 属性即可。

2. 使用 CSS Flexbox

在容器上设置 display: flex 和 flex-direction: row，然后通过 order 属性来控制图片的顺序。例如：

<div class="img-container">
  <img src="left-img.jpg" class="left">
  <img src="right-img.jpg" class="right">
</div>

/* CSS */
.img-container {
  display: flex;
  flex-direction: row;
}
.left {
  order: 1;
}
.right {
  order: 2;
}

同样地，在需要互换位置时，只需要交换两个图片的 order 属性即可。