我一直在尝试删除盒子行之间形成的空间。这是我尝试过的。
我试过只放边框:1 px 纯黑色,但它仍然没有呈现出我想要的形状。我希望网格没有观察到的双线。
var div = document.getElementById("click");
guessX = 0;
guessY = 0;
function capturaCoor(event) {
var x = event.offsetX;
var y = event.offsetY;
guessX = x;
guessY = y;
console.log("x coords: " + guessX + ", y coords: " + guessY);
}
var i, j;
for (i = 0; i < 525; i++) {
$("#click").prepend($('<div class="re"></div>'));
}
$(".re:odd").css("background-color", "white");
body,
html {
padding: 0;
margin: 0;
}
.re {
height: 20px;
width: 20px;
background-color: black;
cursor: pointer;
border-bottom: 1px solid;
border-top: 1px solid;
}
.re:hover {
background-color: red;
}
#click {
width: 500px;
height: 500px;
border: 1px solid black;
display: flex;
flex-wrap: wrap;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="click" onclick="capturaCoor(event)"></div>
干杯!
在您的情况下,它正在定义高度,因此它通过以下方式解决,仅放置
#click
elheight: auto;
并从类中删除边框.re
添加到容器
align-content: baseline;
应该证明元素的合理性。如果您想了解有关如何使用 flex 的更多信息,我建议您尝试这个针对初学者的页面,该页面对它的解释非常好,并且带有游戏。
您可以删除高度。此外,在创建 DIVS 时,它们的关闭很差。
干杯