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

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

div { box-sizing: border-box; }

或者，最好将其添加到每个div的样式块中（因为您可能不希望将其应用于页面上的所有div）。

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

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

Answer 2

这是因为边界。如果省略边框，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框的想法是它修改普通框模型的行为，将padding和border作为width元素的一部分。所以现在当你设置％宽度时，边界已经被考虑在内了。这就是现在20 + 20 + 60达到100％的原因。

可以找到其他信息in this link

Answer 3

边框占用了div宽度中未考虑的额外空间。尝试将box-sizing: border-box;添加到每个div类中。

Answer 4

你应该添加：

html, body {
  margin: 0;
}

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

和

* {
  box.sizing: border-box;
}

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

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

4 个答案: