Html 如何使用CSS浮动框

我正在创建一个快速响应的网格布局，但我想知道如何浮动框，并保持最后一个容器在没有边界的情况下正确浮动

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

Ipad将展示3个盒子

手机将显示2个盒子。最后一个框的右边距必须为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);
    }
});

$（文档）.ready（函数（e）{
删除页边距（）；
$（窗口）。调整大小（函数（）{
删除页边距（）；
});
函数removeMargin（）{
var wW=$（window.width（）；
//重置箱子
$（'.box'）.css（“右边距”，“insertDefaultValueHere”）；
如果（wW<3boxThreshold）
$（'.box:nth child（3n）'）.css（“右边距”，0）；
否则如果（wW<2boxThreshold）
$（'.box:nth child（2n）'）.css（“右边距”，0）；
其他的
$（'.box:nth child（3n）'）.css（“右边距”，0）；
}
});

见此

编辑

您可以删除

#容器宽度

并添加

#容器填充右侧：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;
}

加：

及

将执行您需要的操作。
如下更改您的标记：

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

在容器上使用负边距并去掉clearfix div：


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

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

查看小提琴：

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

我在fiddle中添加了一个媒体查询，这样您就可以看到当容器中有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);
    }
}

//获取容器的宽度
var cont_width=$（'#container'）.width（）；
//容器中的计数框div
var cont_children=$（“#容器>*：可见”）。长度；
//从第一个孩子那里获取框填充
var box_padding=$（'.box:first child'）.innerWidth（）；
//与所有4个框共享最后一个“不存在”填充
var padding\u share=框填充/cont\u子项；
//计算盒子大小
变量框宽度=（连续宽度/连续子项）+填充共享；
//设置每个框的宽度，删除最后一个框的填充
对于（var i=0；i而不是
float
ing
.box
es，您可以使用
display:inline block
和
添加
文本对齐：将
对齐到
#容器

但是它仍然不能像预期的那样工作，因此您需要获取用于clearfix的额外的
div
，并将其放在标记中的
#容器的底部

然后将类的名称从
.clearfix
更改为类似
.spacer
；
间隔类将具有：
显示：内联块
和
宽度：100%

您还需要指定
.box
es
垂直对齐：top；
否则，如果框中存在
内联
文本等元素，则水平对齐可能会中断

现在您会注意到，框之间以适当的间距排列，并且一行中的第一个和最后一个框粘在边缘上


标记：

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

这里有一篇文章详细解释了这种方法。
你设置了
宽度：480px；
并且在全宽和响应时不需要空白？！我如何设置最后一个没有空白的，因为当站点是全宽时，它将有4个框。更小的尺寸，它将有3个框，移动设备将有2个框。你可以在媒体查询中使用r不同的屏幕宽度。例如：谢谢，我想第n个术语就是我要找的。如果只显示3个或2个框，我会像这样显示代码。框：第n个类型（3n）{margin right:0}。框：第n个类型（2n）{margin right:0}？？类似的情况-我在这里添加了一些媒体查询：但是您需要根据需要正确计算宽度您的小提琴没有删除边距？这将从最后一个块中删除
左边边距
。OP希望右边边距为0，所以…我也在本地测试了它，它可以按照OP的要求工作。至少据我所知那么当OP所说的每行有两到三个盒子时呢？OP希望它有响应性，那么你打算如何瞄准3n和2n？你能做个提琴吗？@PaulDesigner你不能吗？谢谢你的帮助！这在所有浏览器中都有效吗？当你实际更改浏览器大小时，盒子会调整吗？
$($($(".clearfix").nextAll())[3]).css("float","right").css("margin","0px");

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

.container > div:last-child{
    margin-right: 0;
}

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

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

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

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

* {
    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%;
    }