CSS div不向左浮動，有衝突的樣式？

Question

我想用兩個div製作一個加載欄，背景欄是灰色的，前景是綠色的。背景（.bar）中的小節很好，但綠色小節（.load）居中在灰色小節中;它應該左對齊。我對此有點新，所以我可能會忽略一些東西，任何幫助表示讚賞！

如果您需要了解的造型更多信息只是檢查出該網站http://keithtmock.com/ 它的網頁上

這裏是CSS屬性

.bar 
{ 
width:820px; 
height:30px; 
margin-top:30px; 
background-color:gray; 
} 
.load 
{ 
width:820px; 
height:30px; 
background-color:green; 
transform:scale(.5,1); 
-ms-transform:scale(.5,1); /* IE 9 */ 
-moz-transform:scale(.5,1); /* Firefox */ 
-webkit-transform:scale(.5,1); /* Safari and Chrome */ 
-o-transform:scale(.5,1); /* Opera */ 
} 

HTML

<div class="bar"> 
    <div class="load"> 
    </div> 
</div> 

Answer 1

這是因爲變換從中間被相對地應用，並且對象在之後不被移動。使用transform-origin解決這個問題：

-webkit-transform-origin: 0; 
-moz-transform-origin: 0; 
-ms-transform-origin: 0; 
-o-transform-origin: 0; 
transform-origin: 0; 

瞭解更多關於它的MDN "transform-origin"。

演示

Try before buy。

Answer 2

這是解決方案：

.bar 
{ 
width:820px; 
height:30px; 
margin-top:30px; 
background-color:gray; 


} 
.load 
{ 
width:820px; 
height:30px; 
background-color:green; 


transform:scale(.5,1); 
-ms-transform:scale(.5,1); /* IE 9 */ 
-moz-transform:scale(.5,1); /* Firefox */ 
-webkit-transform:scale(.5,1); /* Safari and Chrome */ 
-o-transform:scale(.5,1); /* Opera */ 
-webkit-transform-origin: 0; 
-moz-transform-origin: 0; 
-ms-transform-origin: 0; 
-o-transform-origin: 0; 
transform-origin: 0; 

}