html - 使用宽度百分比

Question

我正在尝试在外部 div 中浮动两个 div，但我的问题是当使用百分比作为宽度时，空间没有被完全占用

您可以在此处查看 html：http: //codepen.io/vincentccw/pen/DBEot

<div class="outer">
    <div class="d1">a</div>
    <div class="d2">b</div>
</div>

.outer{
  background:red;
  width:1024px;
  margin:0 auto;
  height:400px;
}

.d1{
  background:green;
  width:20%;
  float:left;
}

.d2{background:blue;
    width:80%;
    float:left;
}

注意'd2'类没有被完全占用（你仍然可以看到右边的红色），除非我改变了将百分比转换回像素值。

Answer 1

.d2{
  background:blue;
    width:80%;
    float:right;
}

为我工作

一个向左浮动，另一个向右浮动。

Answer 2

检查这个http://codepen.io/anon/pen/qyDEe。当您尝试将两个 div 都向左浮动时，您无法占据整个宽度。

Answer 3

这很奇怪，看起来像是浏览器渲染器中的一些错误。浏览器报告 d1 的宽度为 205px 和 d2 - 819px，它们的总和正好是 1024px。但是 1024 像素的 20% 是 204.8 像素，1024 像素的 80% 是 819.2 像素（不是精确值）。如果您将父 div 的宽度设置为 1000px，那么您将精确匹配内部 div。