CSS边框问题

Question

我目前正在尝试制作一个内部有4个小正方形的正方形，而我在尝试做某事时遇到了麻烦。 所以这是代码：

 #grandbox { position: absolute; width: 204px; height: 204px; border: solid thin black; left: 40%; top: 8%; } div.smallbox { border: solid thin black; text-align: center; width: 100px; height: 100px; float: left; line-height: 100px; } 

 <div id="grandbox"> <div class="smallbox"></div> <div class="smallbox"></div> <div class="smallbox"></div> <div class="smallbox"></div> </div> 

我想制作边框的css样式：

border: 2px solid black

但是，如果我这样做，则这些框会从较大的框中弹出并垂直显示。

我现在刚开始我的职业生涯，所以这是我的新手，但我不明白为什么它不起作用。

PS：对不起，如果英语不好，不是我的母语。

Answer 1

通常，边框宽度会添加到给定的宽度。 使用box-sizing: border-box; 规则，您可以将边框包括在宽度中，这样您就不会再折断了。 请参阅以下代码段：

 #grandbox { position: absolute; width: 200px; height: 200px; border: solid thin black; left: 40%; top: 8%; } div.smallbox { border: solid thin black; text-align: center; width: 100px; height: 100px; float: left; line-height: 100px; box-sizing: border-box; } 

 <div id="grandbox"> <div class="smallbox"></div> <div class="smallbox"></div> <div class="smallbox"></div> <div class="smallbox"></div> </div> 

有关框大小的更多信息，请参见https://developer.mozilla.org/de/docs/Web/CSS/box-sizing 。

Answer 2

编辑：我的答案更多是黑客解决方案。 上面公认的答案是将框大小自动包括在内（在宽度中包括边框），这是一个更好的答案。

在您最初对高度和宽度（204）的计算中，我认为您没有考虑到每个正方形的两边都要大4像素。

将宽度和高度调整为208px应该可以解决您的问题。

 #grandbox { position: absolute; width:208px; height:208px; border: 2px solid black; left:40%; top: 8%; } div.smallbox { border: 2px solid black; text-align: center; width: 100px; height: 100px; float: left; line-height: 100px; } 

 <body> <div id="grandbox"> <div class="smallbox"> </div> <div class="smallbox"> </div> <div class="smallbox"> </div> <div class="smallbox"> </div> </div> </body> 

Answer 3

外盒应relative放置，四个内盒应absolute放置。 然后你只需要使用放置它们left right top bottom性质。

 #grandbox { position: relative; width: 204px; height: 204px; border: solid thin black; left: 40%; top: 8%; } div.smallbox { border: solid thin black; text-align: center; position: absolute; width: 100px; height: 100px; float: left; line-height: 100px; } div.sb1 { top: 0; left: 0; } div.sb2 { top: 0; right: 0; } div.sb3 { left: 0; bottom: 0; } div.sb4 { right: 0; bottom: 0; } 

 <div id="grandbox"> <div class="smallbox sb1"> </div> <div class="smallbox sb2"> </div> <div class="smallbox sb3"> </div> <div class="smallbox sb4"> </div> </div> 

这是jsbin版本。