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

.box`esを#container内に圧縮する場合は、より良い解決策です。「インラインブロック」として表示し、必要に応じて（左または右に）フロートします。ただし、ブロックの順序は事前に特殊化する必要があることを知っておく必要があります。ここに簡単な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 に答える