为什么浮点位置当元素缩小时元素不移动 [英] Why float position Elements not move when the element scale down
问题描述
全部:
现在说我有3个DIV坐在同一行,每个宽度:33%;高度:100%;
现在我想使用transform:scale(0.5)缩小第一个,我想第二个将向左移动,但我不知道为什么第二个不移动,可以任何人帮助?
Say right now I have 3 DIVs sit in a same row, each is width: 33%; height:100%; And right now I want to use transform: scale(0.5) to zoom out the first one, and I thought the second one will move left, but I do not know why the second one does not move at all, could anyone help?
推荐答案
还有一个类似的问题这里,并从接受的答案这个报价很多解释它:
A similar question was asked here and this quote from the accepted answer pretty much explains it:
CSS变换不影响文档流。 DOM元素将
在页面流中占据其原始位置和尺寸。
CSS Transform does not affect document flow. The DOM element will occupy its original position and dimensions within the page flow.
因此,您的DIV不会移动,因为尽管缩放,文档仍将元素视为其原始大小。要使更改影响流程,您必须实际更改其宽度和高度的尺寸。
So your DIV doesn't move because despite the scaling, the document still treats the element as being of its original size. To make the change affect flow you'll have to actually change its dimensions with width and height.
这篇关于为什么浮点位置当元素缩小时元素不移动的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!