<div>
  <button class="rollback">还原</button>
  <button class="flex">flex解决空白折叠</button>
  <button class="float">浮动解决空白折叠</button>
</div>
<div class="wrap">
  <img src="https://z1.ax1x.com/2023/10/19/piiFoPP.jpg" alt="">
  <img src="https://z1.ax1x.com/2023/10/19/piiFoPP.jpg" alt="">
  <img src="https://z1.ax1x.com/2023/10/19/piiFoPP.jpg" alt="">
</div>
body {
  background: #dddddd;
}
.wrap {
  margin-top: 10px;
  /* 推荐用flex布局去解决 */
  /*   display: flex; */
}
img {
  width: 150px;
  height: 150px;
  /* web端还可以用浮动去解决 */
  /*   float: left; */
}
const rollback = document.querySelector(".rollback");
const flexBtn = document.querySelector(".flex");
const floatBtn = document.querySelector(".float");
const wrapBox = document.querySelector(".wrap");
const imgs = document.querySelectorAll("img");
flexBtn.addEventListener("click", (e) => {
  wrapBox.style.display = "flex";
  imgs.forEach((el) => {
    el.style.float = "none";
  });
});
floatBtn.addEventListener("click", (e) => {
  wrapBox.style.display = "block";
  imgs.forEach((el) => {
    el.style.float = "left";
  });
});
rollback.addEventListener("click", (e) => {
  wrapBox.style.display = "block";
  imgs.forEach((el) => {
    el.style.float = "none";
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.