2

固定幅（％）の2つの要素があります。

最初の要素が配置さleft: 0れ、2番目の要素が配置されright: 0ました;

これらの2つの要素の間にいくつかのN個の要素を追加する必要があるため、新しく追加された各要素の幅は同じになります（メイン要素間の使用可能なスペースによって異なります）。

http://jsfiddle.net/hXUyh/1/

問題は、新しい要素が正確に配置されておらず（互いに交差しているか、間に余分なスペースが残っている）、異なるブラウザのウィンドウサイズと一貫して配置されていないことです。

助けてください。

ブラウザが異なれば出力も異なることを理解していますが、このスクリプトはGoogleChromeの使用のみに制限されます。

4

2 に答える 2

1

これを試して：

$(document).ready(function() {
    for (var i = 0; i < 9; i++) {
        $('<div/>').appendTo('body')
    }
    $(window).resize(function() {
        var firstWidth = $('#element-0').width();
        var r = ($(window).width() - (firstWidth * 2) - 2) / 9;
        $('div').slice(2, 11).each(function(i) {
            $(this).css({
                left: i == 0 ? firstWidth : firstWidth + r * (i),
                width: r
            })
        })
    }).resize() 
});​

http://jsfiddle.net/yav9Q/

于 2012-10-08T23:57:32.063 に答える
0

少し前まで、同様の要件がありました。あなたの戦略/コードを質問したり変更したりすることなく、ここに私が得ることができる限り近いフィドルがあります: http://jsfiddle.net/hXUyh/3/ (元のコードのようにサイズ変更に対応していないことに注意してください。 t)

width() jquery 関数が丸くなる問題。したがって、あなたの数学は常に少しずれます。window.innerWidth の計算を使用してこれを改善しました。浮動小数点の幅が原因で少しずれます。ピクセルの完全な配置のために浮動小数点幅を使用することは、適切な方法ではありません。

完全な位置合わせが必要な場合は、パディングを使用してください。可能な限り最小のパディングを使用した例を次に示します: http://jsfiddle.net/hXUyh/8/ 境界線が必要ない場合、数学ははるかに簡単です。

于 2012-10-08T23:58:25.477 に答える