Div 宽度百分比在 CSS 中不起作用

Div width percentage not working in CSS

这是我的 CSS:

.leftdiv {
    width:20%;
    border:2px solid blue;
    float:left;
}

.middlediv {
    width:60%;
    border:1px solid orange;
    float:left;
}

.rightdiv {
    width:20%;
    border:1px solid black;
    float:right;
}

这是我的 html:

<body>
    <div class="leftdiv">left</div>
    <div class="middlediv">middle</div>
    <div class="rightdiv">right</div>
</body>

我希望看到的是横跨屏幕的三个 div 占屏幕宽度的 100%。

而是看这个:

右边div在下一行

边框占用 space 未计入 div 宽度的额外空间。尝试将 box-sizing: border-box; 添加到每个 div 类.

你应该添加这个:

html, body {
  margin: 0;
}

将全包 bodyhtml 元素的默认边距重置为零

* {
  box.sizing: border-box;
}

在您的百分比值中包含填充和边框。

html,
body {
  margin: 0;
}

* {
  box-sizing: border-box;
}

.leftdiv {
  width: 20%;
  border: 2px solid blue;
  float: left;
}

.middlediv {
  width: 60%;
  border: 1px solid orange;
  float: left;
}

.rightdiv {
  width: 20%;
  border: 1px solid black;
  float: right;
}
<body>
  <div class="leftdiv">left</div>
  <div class="middlediv">middle</div>
  <div class="rightdiv">right</div>
</body>

问题是,默认情况下,填充和边框是在宽度之外计算的,不包括在宽度值中。您需要使用 box-sizing: border-box override 来包含它们:

div { box-sizing: border-box; }

或者,最好将它添加到每个 individual div 的样式块中(因为您可能不想将它全部应用于页面上的所有 div ).

.leftdiv,.middlediv,.rightdiv{
  box-sizing: border-box;
}

示例:https://codepen.io/anon/pen/RLZWWO

这是因为边界。 如果您省略边框,您的 div 将对齐。 使用 border-box 解决问题:

 .leftdiv{
box-sizing: border-box; 
width:20%;
border:2px solid blue;
float:left;}

.middlediv{
box-sizing: border-box;
width:60%;
border:1px solid orange;
float:left;}

.rightdiv{
box-sizing: border-box;
width:20%;
border:1px solid black;
float:right;}

box-sizing: border box 的想法是修改普通框模型的行为,将填充和边框视为宽度元素的一部分。所以现在当您设置 % 宽度时,边框已经被考虑在内。这就是为什么现在 20+20+60 达到 100% 的原因。

可以找到更多信息in this link