Question

我正在创建一个响应式网格布局，但想知道如何浮动框并保持最后一个容器没有边距浮动。

例如。全宽桌面版将显示4个框。

Ipad将显示3个方框

手机会显示2个方框。最后一个框需要有0个边距。

<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>

Answer 1

添加：

.box:nth-of-type(4n){
margin-right:0
}

Answer 2

更改您的标记：

<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;
}

Answer 3

我实际上认为这个主题有点棘手，因为我确信您不仅要删除最后一个框的边距，而且还希望所有框都具有相同的宽度。

这意味着我们需要知道当前显示了多少个框并忽略了媒体查询隐藏的那些框，删除了最后一个容器上的填充（我在封面上使用填充而不是边距）并共享填充所有盒子使它们的宽度相等。

查看小提琴：http://jsfiddle.net/SGy4R/8/

我基本上得到#container的宽度并计算容器内的所有可见子项。然后我得到第一个框的填充来计算每个框的填充份额。使用for循环，我将计算出的宽度应用于每个box元素，同时从最后一个元素中删除填充。

我向小提琴添加了一个媒体查询，以便在#container中有3或4个框时可以看到它是如何工作的。只需调整结果窗格的大小，然后再次运行小提琴。

// Get width of container
var cont_width = $('#container').width();
// Count box divs in container
var cont_children = $("#container > *:visible").length;
// Get box padding from first child
var box_padding = $('.box:first-child').innerWidth();
// Share last "non-existent" padding with all 4 boxes
var padding_share = box_padding / cont_children;
// Calculate box size
var box_width = (cont_width / cont_children) + padding_share;

// Set width for each box, remove padding for last box
for ( var i = 0; i <= cont_children; i++ ) {
    if (i === cont_children) {  
        $(".box:nth-child(" + i + ")").css({
            'width':box_width - box_padding,
            'padding-right': '0px'
        });
    }
    else {
        $(".box:nth-child(" + i + ")").width(box_width-box_padding);
    }
}

Answer 4

您可以使用媒体查询：

// 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);
    }
});

Answer 5

请参阅 DEMO

修改

您可以删除#container width并添加#container padding-right:20px;

.box{ float:left; width:100px; height:100px; background:red; margin-left:20px;; margin-bottom:20px; color:white; } .clearfix{ clear:boh; } #container{ border:1px solid black; float:left; padding-right:20px; }

Answer 6

$(".clearfix").prev().css("float","right").css("margin","0px");

和

$($($(".clearfix").nextAll())[3]).css("float","right").css("margin","0px");

会做你需要的。

Answer 7

在容器上使用负边距并删除clearfix div：

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

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

#container .box {
  margin: 20px 0 0 20px;
}

Answer 8

您可以使用float和.box而不是display: inline-block text-align: justify 将#container添加到div。

但它仍然无法按预期工作，因此您需要使用用于clearfix的额外#container并将其降级到标记中.clearfix的底部。

然后，您将班级名称从.spacer更改为display: inline-block; spacer类将具有：width: 100%和.box。

您还需要提供vertical-align: top; es inline，否则如果框中存在<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="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='spacer'></div> </div>元素（如文字），则水平对齐可能会中断。

现在你会注意到盒子之间的间距是合适的，并且一行中的第一个和最后一个盒子都粘在边缘上。

JSFIDDLE

标记：

* {
    box-sizing: border-box; /* www.paulirish.com/2012/box-sizing-border-box-ftw/ */
    }

#container {
    width: 480px;
    border:1px solid black;

    text-align: justify;
    }

.box {
    display: inline-block;
    vertical-align: top; 

    width: 100px;
    height: 100px;
    background:red;

    margin-bottom:20px;
    color:white;
    }

.spacer {
    display: inline-block;
    width: 100%;
    }

CSS：

{{1}}

这是一篇文章，详细介绍了这种方法http://www.barrelny.com/blog/text-align-justify-and-rwd/。

如何使用CSS浮动框

8 个答案: