如何在将变换应用于子节点后重排容器？

Question

我想在容器中显示div框并水平排列。由于这可以变得非常宽，我还想提供一个缩放滑块，它将重新缩放这些div。

这样可行但项目已重新调整但未重新定位。我在这里创建了一个示例：http://jsfiddle.net/mtphLyem/5/。

我希望容器在应用转换后重新布局项目。我怎么能这样做？

Answer 1

我认为问题来自于transform，因为转换只会“模拟”更大的元素，但不会更改任何宽度值或某些值。就像那意味着你的浏览器仍然试图用原始值进行布局。

你可以通过改变font-size来实现这样的效果，它可以自行改变宽度，高度和位置。

例如： http://jsfiddle.net/mtphLyem/7/

function zoom(zoomFactor) {
    $('.container > .step').css('font-size', zoomFactor + 'px');
}

<强>更新 来自以下评论：

'然后你也可以改变边距，因为改变尺寸会再次触发缩放。这个看起来很有实验性，我相信有一种更有效的方法可以做到这一点，但它似乎仍有效：jsfiddle.net/mtphLyem/10'

Answer 2

由于您已经在使用jQuery，只需绑定到更改事件：

$("#zoom").on("input change", function() { zoom($(this).val()) });