使用宽度百分比

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。 但是20％的1024px是204.8px，而80％的1024px是819.2px（非精确值）。 如果将父div的宽度设置为1000px，则可以精确匹配内部div。