0

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

4

4 回答 4

2

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

于 2017-09-30T23:11:22.110 回答
2

这是因为边界。如果您忽略边框，您的 div 将对齐。使用边框框解决了这个问题：

 .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%。

可以在此链接中找到其他信息

于 2017-09-30T23:22:27.613 回答
1

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

于 2017-09-30T23:10:21.367 回答
1

你应该添加这个：

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>

于 2017-09-30T23:10:30.447 回答