Question

我正在查看已创建的画布应用The Eatery，我注意到布局是如何流畅的。具体来说，#main列的左边距在页面加宽时会放大。我用Chrome的检查器查看了CSS，但我看不到设置的属性是从左边缘开始的默认距离，但随着页面的长度而增长。有一个内联样式，但我不明白它是如何相对于窗口的宽度。

我可以使用类似left:5%;的内容复制它，但我不认为这是特别在此页面上发生的事情。因为，在检查器中观察它，它是基于像素的大小调整并使用百分比来保持CSS中的百分比。知道在那个页面上发生了什么我似乎无法重复吗？

我已经查看了大量关于SO的固定宽度问题，但似乎都没有答案。

Answer 1

这是由javascript onresize事件制作的。

在此特定代码中：

var a=$(window).width()
b=184;
$("#main").css("left", Math.max( (a-500-600)/2, 20) ), 
    $(window).height() < 800 ?
    ($("#hand, .hand-image").addClass("smaller") , b=96 ) :
    $("#hand, .hand-image" ).removeClass( "smaller" ), $("#app-store").css("right", Math.min(a-850, b ) );

- 从源代码中删除 -

这个想法很简单，取文档或窗口的宽度，然后根据大小将div移动到一个位置。在这种情况下，左值是(a-500-600)/2和20（px）之间的较高值。

如何创建相对内联样式？

1 个答案: