[英]Fill in the free space in the last block
我正在尝试在 html/css 中做一个简单的平铺。
当你点击一个方块时,它会消失,它旁边的方块会填满剩余的空间。 问题是剩下的最后一个方块在左边(或右边),只占屏幕的中间。 你能告诉我如何让最后一个剩余的方块填满整个屏幕吗? (颜色用于工作的清晰度)。
这是代码:
var el = document.getElementsByClassName("square"); for (var i = 0; i < el.length; i++) { el[i].addEventListener("click", function() { this.remove(); }, true); }
html, body { width: 100%; height: 100%; margin: 0; padding: 0; display: flex; } .container { height: 100%; width: 100%; display: flex; flex-flow: column wrap; } .square { flex: 1 1 auto; background-color: gray; border: solid; margin: 1em; }
<div class="container"> <div style="background: darkred" class="square"></div> <div style="background: darkblue" class="square"></div> </div> <div class="container"> <div style="background: darkgreen" class="square"></div> <div style="background: purple" class="square"></div> </div>
您正在删除彩色框,但它们包含在一个<div class="container">
,在您单击这些块后,这些框仍然存在。
如果您要移除最后一个盒子,则还必须移除其容器。 然后剩下的盒子也将填充水平空间。
var el = document.getElementsByClassName("square"); for (var i = 0; i < el.length; i++) { el[i].addEventListener("click", function() { if (this.parentElement.childElementCount === 1) { this.parentElement.remove(); } else { this.remove(); } }, true); }
html, body { width: 100%; height: 100%; margin: 0; padding: 0; display: flex; } .container { height: 100%; width: 100%; display: flex; flex-flow: column wrap; } .square { flex: 1 1 auto; background-color: gray; border: solid; margin: 1em; }
<div class="container"> <div style="background: darkred" class="square"></div> <div style="background: darkblue" class="square"></div> </div> <div class="container"> <div style="background: darkgreen" class="square"></div> <div style="background: purple" class="square"></div> </div>
还剩下两个<div class="container">
,容器还在,虽然矩形消失了。
您需要检查是否只剩下一个孩子,如果是 - 取出容器。 考虑将您的js
代码更改为:
var el = document.getElementsByClassName("square"); for (var i = 0; i < el.length; i++) { el[i].addEventListener("click", function() { if (this.parentElement.childElementCount === 1) { this.parentElement.remove(); } else { this.remove(); } }, true); }
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.