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;

}

CSS div不浮左，风格冲突？

2 个答案: