2

に表示するサムネイル画像のセットがありdivます。div の幅は、画面サイズによって異なります。画像はすべて の固定サイズで150px * 150px、パディングは5pxです。これらのサムネイル画像をグリッド レイアウトで配置し、これらの画像を外側の div に対して中央揃えにする必要があります。text-align: center外側のdivを試すことができました。

しかし、この方法では、最後の行の画像が中央に表示され、左から並べたいと思います。padding-left (=freespace/2)そこで、画像を配置した後に利用可能な空き容量を計算し、外側の div にa を適用して、コンテンツが中央揃えで表示されるようにすることを考えました。

これは私が使用したコードです。

CSS

#outer {
    border: 1px solid;
    resize: horizontal;
    overflow: auto;
    width: 700px;
    padding: 0;
}

.inner {
    width: 150px;
    height: 150px;
    background: #ccc;
    padding: 5px;
    display: inline-block;
}

jQuery

$(document).ready(function() {
    $("#position").click(function() {
        var maxCount = Math.floor($("#outer").outerWidth() / $(".inner").outerWidth());
        console.log("maxcount::" + maxCount);
        var freeSpace = $("#outer").outerWidth() - ($(".inner").outerWidth() * maxCount);
        console.log("freeSpace::" + freeSpace);
        $("#outer").css("padding-left", freeSpace / 2);
    });

    $("#text").toggle(function() {
        $("#outer").css("text-align","center");
    },function(){
        $("#outer").css("text-align","left");
    });
});

HTML

<button id="position">
    Adjust position
</button>
<button id="text">
    Toggle text align
</button>
<div id="outer">
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
    <div class="inner"></div>
</div>

ここのデモ - http://jsfiddle.net/userdude/fzjrm/1/

しかし、コンテンツが完全に中央揃えではないため、これは期待どおりに機能しません。ロジックを微調整する必要があるかもしれませんが、私はそれを理解できません。

4

2 に答える 2

3

最初は、コンテナにパディングもある場合、一般的$("#outer").innerWidth()に計算時に使用することをお勧めします。要素の内部のみを使用できます。maxCount

そして最後に、あなたの問題の解決策として、追加することをお勧めします

box-sizing: border-box;
-moz-box-sizing: border-box;

#outerその幅を維持するためにdiv に。残念ながら、これは期待どおりに機能しません。左側よりも右側に少しスペースがあります。しかし、私が理解できないもう 1 つの奇妙な点があります。div 間の空白 (スクリーンショットを参照)、これらの部分に影響を与える CSS が見つかりません。これらのスペースが計算に影響を与えていると思いますleft-padding。

ここにjsFiddleリンクがあります

ここに画像の説明を入力

于 2012-08-28T15:21:59.650 に答える
0

どうぞ: http://jsfiddle.net/dan_barzilay/fy494/

私がしたことは、左の#outerパディングを変更する代わりに、左側freeSpace / 2からのみサイズを大きくすることで、両方を変更padding-rightしpadding-left、freeSpace / 4画像を中央に保つことでした。

$("#outer").css({"padding-left": freeSpace / 4, "padding-right": freeSpace / 4});
于 2012-08-28T14:50:00.770 に答える