gpt4 book ai didi

css - 盒子大小 : border-box not working

转载 作者:太空宇宙 更新时间:2023-11-03 21:19:24 25 4
gpt4 key购买 nike

因此,我有一个宽度和高度固定的容器 div,并根据我的输入使用 jQuery 在其中创建网格 div。问题是我需要网格上的边框,它们会增加空间,所以 div 不适合放在容器内。我找到了 box-sizing: border-box 属性,但由于某种原因它什么也没做。最初我认为也许我需要 -webkit- 前缀,因为我使用的是 Chrome,但事实并非如此。

有什么帮助吗?请记住,我刚刚开始学习。

HTML:

<DOCTYPE html>
<html>
<head>
<title>jQuery Sketch-pad</title>
<link rel="stylesheet" href="css/sketch-pad.css">
</head>
<body>
<div id="container">

</div>

<button id="clear-grid">Clear grid</button>

<script src="js/jquery-3.1.0.min.js"></script>
<script src="js/sketch-pad.js"></script>
</body>
</html>

CSS:

#container {
margin: 30px auto;
border: 1px solid red;
height: 960px;
width: 960px;
}

#container > div {
border: 1px solid black;
display: inline-block;
box-sizing: border-box;
}

.hovered {
background-color: black;
}

最佳答案

您的固定宽度在 #container 中,而不是在内部 div 中。

box-sizing:border-box 在您为它们定义固定宽度时效果很好,因为它们需要知道容器的最大宽度是多少。

如果您将在 #container 上定义 box-sizing:border-box 那么您将看到它工作,但您需要在内部 div 上定义宽度以使 box-sizing:border-box 工作。

阅读此内容以供引用:https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

关于css - 盒子大小 : border-box not working,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/38892733/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com