0

我用正方形创建了一个页面。方块组合成一个特定的单词。但是当我调整窗口大小时，方块会随意打乱它们的位置。如何更改我的CSS或javascript以便正方形在调整窗口大小时保留其原始位置？

您可以在以下位置查看该页面：http ://www.tryst-iitd.com/13/beta

我已经包含以下代码来处理调整大小，但问题仍未解决。

<script type="text/javascript">
$(function () {
    var screenWidth = $(window).width() + "px";
    var screenHeight = $(window).height() + "px";
    $("#container").css({
        width: screenWidth,
        height:screenHeight,
    });
    $(window).resize( function () {
        var screenWidth = $(window).width() + "px";
        var screenHeight = $(window).height() + "px";
        $("#container").css({
            width: screenWidth,
            height:screenHeight,
        });
    });
});
</script>
4

3 回答 3

0

您的问题是您的 css 边距是固定宽度，因此即使正方形宽度以 % 为单位，边距也会导致此问题。例如，尝试禁用wrap1和wrapalphabetcss 类，您会发现您的设计响应速度更快。

您可能必须重新考虑处理边距/填充的方式才能获得预期的结果。

于 2013-01-12T15:36:26.510 回答
0

正方形被打乱了，因为每当您调整窗口大小时，容器的宽度都会自动调整。为正方形设置一个固定值或设置一个最小宽度，容器应该可以解决问题。正方形宽度以 % 为单位。

另外，window resize 事件本身是没有用的，因为 div (id=container) 是根据 body 标签的宽度调整的

于 2013-01-12T14:42:21.543 回答
0

以百分比设置正方形的位置和大小，您的调整大小代码将正常工作。

另外，设置min-width/ min-heightCSS 属性会防止你的方块太小。

于 2013-01-12T15:17:40.603 回答