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

Question

这是我的 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在下一行

Answer 1

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

Answer 2

你应该添加这个：

html, body {
  margin: 0;
}

将全包 body 和 html 元素的默认边距重置为零

和

* {
  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>

Answer 3

问题是，默认情况下，填充和边框是在宽度之外计算的，不包括在宽度值中。您需要使用 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

Answer 4

这是因为边界。如果您省略边框，您的 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

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

Div width percentage not working in CSS

html

css

box-sizing