使用寬度百分比

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。