实心阻塞DIV'；s使用javascript或jQuery_Javascript_Jquery_Html_Css

实心阻塞DIV'；s使用javascript或jQuery

javascript jquery html css

实心阻塞DIV'；s使用javascript或jQuery,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我试图在水平和垂直方向上用div并排制作实心块&当div的高度相同时，我成功地做到了这一点。但是当一个div有更大的高度和宽度时，它将位于另一个div之下，而这些div应该位于它的旁边和下面。这是问题的一个示例（）&下面是我的代码： <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Test</title> <meta name="viewport"

我试图在水平和垂直方向上用div并排制作实心块&当div的高度相同时，我成功地做到了这一点。但是当一个div有更大的高度和宽度时，它将位于另一个div之下，而这些div应该位于它的旁边和下面。这是问题的一个示例（）&下面是我的代码：

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">
<style>
    body{margin:0px;padding:0px;font-family:Verdana, Geneva, sans-serif;font-size:12px;}
    #container{position:relative;}
    #container .box{width:143px;height:143px;background:#eee;padding:5px;position:absolute;}
    #container .s21{width:303px;}
    #container .s32{width:463px;height:303px;background:#F60;}
</style>
<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script>

<script type="text/javascript">
    function relocate(){
        var browserWidth = $(window).width();
        var defaultWidth = 160;
        var yPos = 7;
        var xPos = 7;
        $('.box').each(function(i, obj) {
            elementWidth = $(this).width();

            if(xPos + elementWidth > browserWidth){
                yPos = yPos + 160;
                xPos = 7;
            }
            $(this).css('top',yPos+'px');
            $(this).css('left',xPos+'px');

            xPos = xPos + 17 + $(this).width();
        });
    }

    $(document).ready(function(){
        relocate();
        $(window).resize(function() {
            relocate();
        });
    });
</script>

</head>

<body>

<div id="container">
<div class="box" id="">
    Test
</div>
<div class="box" id="">
    Test
</div>
<div class="box" id="">
    Test
</div>
<div class="box" id="">
    Test
</div>
<div class="box s32" id="">
    Test
</div>
<div class="box" id="">
    Test
</div>
<div class="box" id="">
    Test
</div>
<div class="box" id="">
    Test
</div>
<div class="box" id="">
    Test
</div>
<div class="box" id="">
    Test
</div>
<div class="box" id="">
    Test
</div>
<div class="box" id="">
    Test
</div>

</div>

</body>
</html>


试验
正文{margin:0px；padding:0px；字体系列：Verdana，Geneva，无衬线；字体大小：12px；}
#容器{位置：相对；}
#container.box{宽度：143px；高度：143px；背景：#eee；填充：5px；位置：绝对；}
#container.s21{宽度：303px；}
#container.s32{宽度：463px；高度：303px；背景：#F60；}
函数重定位（）{
var browserWidth=$（窗口）.width（）；
var-defaultWidth=160；
var-yPos=7；
var-xPos=7；
$（'.box'）。每个（函数（i，obj）{
elementWidth=$（this.width（）；
如果（xPos+elementWidth>browserWidth）{
yPos=yPos+160；
xPos=7；
}
$（this.css（'top'，yPos+'px'）；
$（this.css（'left'，xPos+'px'）；
xPos=xPos+17+$（this）.width（）；
});
}
$（文档）.ready（函数（）{
重新定位（）；
$（窗口）。调整大小（函数（）{
重新定位（）；
});
});
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验
试验

提前感谢。

如果您想在容器中压缩.box`es，更好的解决方案是将其显示为“内联块”，并根据需要浮动（向左或向右）。但是你应该知道，块的顺序应该是专门化的。下面是简单的CSS框对齐：

#container {
    white-space: nowrap;
}
.box {
    white-space: auto;        
    display: inline-block;
    vertical-align: top;
    float:left;
}

不管怎样，如果您想立即重新排序，框的大小通常应该是预定义的宽度和高度（例如，XS、S、M、L、XL、XXL大小）。然后将它们放入矩阵中：

[ 2x1,  0,  1x2, 1x3 ],
[ 1x1, 1x2,  0,   0  ],
[ 1x1,  0,  1x1,  0  ]

你能对你希望发生的事情给出一个更好的解释吗？我不明白你的解释。另外，演示超链接对我不起作用。也许你在找这个：。这正是我要找的。非常感谢pimvdblocks_in_row=行宽/块宽；