我正在尝试为我的网页制作类似 Windows 8 的界面。我创建了充当图 block 的文章，并有一个使图 block 变小或变大的随机生成器。我试图根据屏幕的宽度使它们看起来像在列中。当我改变屏幕宽度时，瓷砖似乎没有适当间隔，这让我发疯。我是 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>
最佳答案
既然我了解了您的问题，我建议您开始使用 css media queries .基本上出于三个原因:
- 这是解决您的问题的一种方法(呃)
- 当涉及到现实世界时，这种脚本化的调整和计算会运行得更慢。
- 它更加清晰和无痛。
在确定的屏幕尺寸下制作一个包含您想要的所有规则的 css 文件，然后针对您想要匹配的任意多个屏幕尺寸再次执行此操作。请记住，您可以使用适用于一种确定的屏幕尺寸的所有 css 技巧来实现您想要的外观和感觉，因为在媒体查询下应用的规则不会干扰您在其他屏幕尺寸下的 css。
毕竟，将所有样式表组织在一个文件中，并将它们包装在适当的媒体查询中。
试一试，您会爱上它的。
是的，我猜它至少在 IE 的三个早期版本中受支持。
关于javascript - 将 HTML 元素分隔成具有适当间距的列(JQuery 和 CSS)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21616425/