1

レスポンシブ グリッド レイアウトを作成していますが、ボックスをフロートさせ、最後のコンテナーをマージンなしでフロートさせる方法を知りたいです。

例えば。全幅のデスクトップ バージョンでは 4 つのボックスが表示されます。

iPadには3つのボックスが表示されます

電話には 2 つのボックスが表示されます。最後のボックスには 0 マージンが必要です。

ここに私のフィドルがありますhttp://jsfiddle.net/SGy4R/2/

<div id="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box">the last box needs no margin right when full width and responsive</div>

    <div class="clearfix"></div>

    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box">the last box needs no margin right when full width and responsive</div>
</div>
4

8 に答える 8

1

追加：

.box:nth-of-type(4n){
margin-right:0
}
于 2013-10-24T14:02:19.663 に答える
1

マークアップを次のように変更します。

<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box">the last box needs no margin right when full width and responsive</div>
</div>
    <div class="clearfix"></div>
<div class="container">
    <div class="box"></div>
    <div class="box"></div>
    <div class="box"></div>
    <div class="box">the last box needs no margin right when full width and responsive</div>
</div>

そしてmargin-right: 0;、最後の子に設定します

.container > div:last-child{
    margin-right: 0;
}
于 2013-10-24T14:06:22.853 に答える
0

コンテナーで負のマージンを使用し、clearfix div を取り除きます。

http://codepen.io/cimmanon/pen/dwbHi

#container {
  margin: -20px 0 0 -20px;
  overflow: hidden;
}

#container .box {
  margin: 20px 0 0 20px;
}
于 2013-10-24T14:15:28.340 に答える
0

メディア クエリを使用できます。

// Normal
.box:nth-child(4n) { margin-right:0; }

@media (max-width: 3boxThreshold) {
    .box:nth-child(3n) { margin-right:0; }
}

@media (max-width: 2boxThreshold) {
    .box:nth-child(2n) { margin-right:0; }
}

ただし、n-th子セレクターは古いブラウザーでは有効なセレクターではないため、代わりに jQuery を追加する必要があります。

$(document).ready(function(e) {
    removeMargin();

    $(window).resize(function() {
        removeMargin();
    });

    function removeMargin() {
        var wW = $(window).width();

        // Resets the boxes
        $('.box').css("margin-right", "insertDefaultValueHere");

        if (wW < 3boxThreshold)
            $('.box:nth-child(3n)').css("margin-right", 0);
        else if (wW < 2boxThreshold)
            $('.box:nth-child(2n)').css("margin-right", 0);
        else
            $('.box:nth-child(3n)').css("margin-right", 0);
    }
});
于 2013-10-24T13:55:53.207 に答える