Question

假设我想组织4＆＃34; divs＆＃34;在标题中使用此简化代码水平拟合。现在这似乎是一个过于简单的问题，但我的浏览器甚至完全窗口只显示三个一个水平行而不是4.任何想法为什么会被欣赏，因为宽度是25％。

<!Doctype html>
<html>
<style>
.division{
  width:25%;
  height:100px;
  float:left;
  border-style: ridge;
}
</style>
<body>
<header>
<div  class = "division"> 1 </div>
<div  class = "division"> 2 </div>
<div  class = "division"> 3 </div>
<div  class = "division"> 4 </div>
</header>
</body>
</html>

Answer 1

问题是边界也需要空间！所以你最终将获得100％以上的收益。看一下CSS的盒子模型。

箱上浆

要更改框模型，您可以将jcmd <pid> JFR.check verbose=true属性添加到box-sizing类，例如：

division

这将改变方框的行为。边框和填充现在是宽度的一部分。

计算

或者，您可以从宽度中减去box-sizing:border-box;（* 2），对于1 {1}的border-width，它可能如下所示：

border-width

按宽度HTML，CSS的百分比组织元素

1 个答案:

箱上浆

计算