html - 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"上阅读有关它的更多信息。

演示

先试后买。

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;

}