假设我想在标题中组织 4 个“div”以水平适应这个简化的代码。现在这似乎是一个过于简单的问题，但我的浏览器即使完全窗口化也只在一个水平行中显示三个而不是 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>
最佳答案
问题是边框也占用空间!所以你最终会得到超过 100% 的结果。看看CSS的盒子模型。
盒子大小
要更改盒模型，您可以将 box-sizing 属性添加到 division 类中，例如:
box-sizing:border-box;
这将改变盒子的行为。边框和内边距现在是宽度的一部分。
计算
或者，您可以从宽度中减去 border-width ( * 2 )，对于 1px 的 border-width ，它可能如下所示:
宽度:计算(25% - 2px);
关于css - 按宽度百分比组织元素 HTML、CSS，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38470957/