<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";
});
});
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.