2

我试图在水平和垂直方向上并排用 DIV 制作实心块，而我已经设法做到了，而 div 具有相同的高度。但是当一个 div 有更大的高度和宽度时，它会在另一个 div 之下，而那些 div 应该在它旁边和之下。这是问题的示例（http://givemeaudience.com/test.html）&以下是我的代码：

<!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>

提前致谢。

4

1 回答 1

0

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

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

http://jsfiddle.net/iegik/DBkXU/

无论如何，如果您想立即重新订购它们，盒子的尺寸通常应该是 - 预定义的宽度和高度（例如，XS、S、M、L、XL、XXL - 尺寸）。然后将它们放在矩阵中：

[ 2x1,  0,  1x2, 1x3 ],
[ 1x1, 1x2,  0,   0  ],
[ 1x1,  0,  1x1,  0  ]
于 2012-11-05T11:10:14.237 回答