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 回答
1

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

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

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

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

我在小提琴中添加了一个媒体查询，这样你就可以看到当#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);
    }
}
于 2013-10-24T15:59:57.150 回答
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 回答
0 
$(".clearfix").prev().css("float","right").css("margin","0px");

和

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

会做你需要的。

于 2013-10-24T14:05:36.757 回答
0

看这个演示

编辑

你可以删除#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;
}
于 2013-10-24T13:58:17.793 回答
0

您可以使用并添加到es，而不是floates 。.boxdisplay: inline-blocktext-align: justify#container

但它仍然不能按预期工作，所以你把div你用于 clearfix 的额外部分#container放在标记中的底部。

然后将类的名称从更改为.clearfix类似.spacer; 间隔类将具有：display: inline-block和width: 100%。

您还需要提供.boxes vertical-align: top;，否则如果inline框中存在诸如文本之类的元素，则水平对齐可能会中断。

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

JSFIDDLE

标记：

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

CSS：

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

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

于 2013-10-27T06:30:53.187 回答
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 回答