将HTML元素分成适当间距的列（JQuery和CSS）

Question

我正在尝试为我的网页制作一个类似Windows 8的界面。 我创建了充当图块的文章，并使用了随机生成器来使图块变小或变大。 我试图根据屏幕的宽度使它们看起来像按列显示。 当我改变屏幕宽度时，瓷砖似乎没有正确地隔开，这让我发疯。 我是CSS和jquery的新手，所以我仍然在学习，并且总是乐于学习做事的新方法。 对于此专栏和间距问题，我将不胜感激。

注意：我的图块通常带有图片，更改代码后，它们只是显示为彩色图块。 现在它们并不总是显示出来的，但我将解决该问题。

例如：每列的宽度应为一个双框或两个单框的宽度。 并取决于屏幕的宽度...如果显示的栏越大，则显示的栏越少。

这是我当前的代码：

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-2.1.0.min.js" type="text/javascript"></script>
    <script src="Script/jquery.lorem.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(function ()
        {
            var colors = ["#2672ec", "#00a300", "#97009f", "#094db5", "#da532c", "#af1a3f", "#613cbc", "#008ad2"];
            var doubleBoxFlag = [true, false, false, false, false, false];
            var pictures = ["Images/1.jpg", "Images/2.jpg", "Images/3.jpg", "Images/4.jpg", "Images/5.jpg", "Images/6.jpg", "Images/7.jpg", "Images/8.jpg", "Images/9.jpg", "Images/10.jpg", "Images/11.jpg"];
            var defaultClass = '.box';



            for (var i = 0; i < Math.floor((Math.random() * 64) + 34) ; i++)
            {
                var rand = Math.floor(Math.random() * pictures.length);
                var boxRand = Math.floor(Math.random() * doubleBoxFlag.length);
                var currentClass = defaultClass + i;
                var currentClassJ = 'box' + i;
                //For picture tiles:
                //$("#Interface").append("<article class=" + currentClassJ + " " + "style='background-image: url(" + pictures[rand] + ")" + "'><span>" + i + "</span>");

                //For Color Tiles:
                $("#Interface").append("<article class=" + currentClassJ + " " + "style='background-color:" + colors[rand] + "'><span>" + i + "</span>");

                if (doubleBoxFlag[boxRand]) {
                    $(currentClass).css("width", "374px");
                    $(currentClass).css("padding-right", "20px");
                }
                else
                    $(currentClass).css("width", "187px");

                $(currentClass).css("height", "187px");
                $("article").css("float", "left");
                $("article").css("margin", "11px");
                $("span").css("display", "block");
                $("span").css("padding-top", "167px");
                $("span").css("padding-left", "12px");


            }
            //if (screen.width <= 480)
            //    $("#Interface").css("width", "470px");
            //if (screen.width >= 1000 && screen.width <= 1799)
            //    $("#Interface").css("width", "470px");
            //if (screen.width >= 1800)
            //    $("#Interface").css("width", "470px");
            // This line below should be adding the random word to each of the articles
            $('span').lorem({ type: 'words', amount: '1', ptags: false });


        });

    </script>
</head>
<body background = "Images/bg.png">
    <div id="Interface"></div>
</body>
</html>

Answer 1

现在，我了解了您的问题，我建议您开始使用CSS媒体查询。 基本上有以下三个原因：

这是解决问题的一种方法
当涉及到现实世界时，这种脚本化的大小调整和计算将运行缓慢。
它更加清晰和无痛。

使用确定的屏幕大小的所有规则制作一个css文件，然后针对要匹配的屏幕大小再次执行此操作。 请记住，您可以使用一个确定的屏幕尺寸可用的所有CSS技巧来获得所需的外观，因为在媒体查询下使用的规则不会在其他屏幕尺寸上与您的CSS混淆。

毕竟，将所有样式表组织在一个文件中，然后将它们包装在适当的媒体查询中。

试试看，您会喜欢的。

是的，我猜至少在三个早期版本的IE中都支持它。

将HTML元素分成适当间距的列（JQuery和CSS）

问题描述

1 个解决方案

解决方案1
1 2014-02-07 01:21:55

将HTML元素分成适当间距的列（JQuery和CSS）

问题描述

1 个解决方案

解决方案1 1 2014-02-07 01:21:55

解决方案1
1 2014-02-07 01:21:55