Question

所以，我有一个具有固定宽度和高度的容器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;
}

Answer 1

您的修正宽度在#container不在内部div中。

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

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

阅读本文以供参考：https://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

盒子大小：边框不工作

1 个答案: