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

使用百分比宽度

3 个答案: