1

サファリ: 動作します

Firefox: 最初のページ読み込み時に奇妙なフローティングの問題が発生し、ブラウザのサイズ変更後に動作する

Chrome: ウィンドウを小さくすると、エンド ボックスがすばやくジャンプします (他のブラウザーはテストしていません)。

ビデオ表示ブラウザの問題: http://tinypic.com/r/2gxo8w3/6

完全なスクリプト:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
</head>
<style>
.box {
    height: 250px;
    background-color: #999;
    float: left;
    margin-right: 10px;
    margin-top: 10px;
}
#boxes {
    width: 100%;
    overflow: auto;
}
.end-box {
    margin-right: 0;
}
.top-box {
    margin-top: 0;
}
</style>
<body>
<div id='boxes'>
    <div class='box'>1</div>
    <div class='box'>2</div>
    <div class='box'>3</div>
    <div class='box'>4</div>
    <div class='box'>5</div>
    <div class='box'>6</div>
    <div class='box'>7</div>
    <div class='box'>8</div>
</div>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
columns = Math.floor($('#boxes').width()/225); //min box/column size (before spacing)
var spacing = ((columns - 1) * 10/$('#boxes').width())*100; //10px spacing between boxes
$('.box').width(100/columns-spacing/columns+'%');
$('.box:nth-child('+columns+'n+0)').addClass('end-box');//removes margins
$('.box:nth-child(-n'+columns+')').addClass('top-box');

$(window).resize(function() {
    columnsCheck = Math.floor($('#boxes').width()/225);
    if(columns != columnsCheck) {
        $('.end-box').removeClass('end-box');
        $('.top-box').removeClass('top-box');
        $('.box:nth-child('+columnsCheck+'n+0)').addClass('end-box');
    }
    columns = columnsCheck;
    var spacing = ((columns - 1) * 10/$('#boxes').width())*100;
    $('.box').width(100/columns-spacing/columns+'%');
    $('.box:nth-child('+columns+'n+0)').addClass('end-box');
    $('.box:nth-child(-n'+columns+')').addClass('top-box');
});
</script>
</body>
</html>

この問題を解決するにはどうすればよいですか (10px の余白を維持しながら)。また、JavaScript/jQuery を介してこの効果を作成する別の方法も受け入れています (純粋な CSS3 を回避しようとしています)。

4

0 に答える 0