如何删除行的最后一个元素上的边距 [英] How do I remove margin on the last element of a row

问题描述

我有宽度为10px或25px的元素.这些元素之间的间距均为5px.我需要将它们放在55px的框中.

I have elements with the width 10px or 25px. These elements are all spaced by 5px. I need to fit these in a 55px box.

<style>
    .container{
        width: 55px;
    }
    .my_inner{
        display: inline-block;
        margin-right: 5px;
    }
    .w10{width: 10px;}
    .w25{width: 25px;}
</style>
<div class='container'>
    <div class='my_inner w10'>
        FOO1
    </div><div class='my_inner w10'>
        FOO2
    </div><div class='my_inner w10'>
        FOO3
    </div><div class='my_inner w10'>
        FOO4
    </div><div class='my_inner w25'>
        BAR1
    </div><div class='my_inner w25'>
        BAR2
    </div>
</div>

不幸的是，我不知道我将拥有多少个元素(w10或w25)，我也不知道它们的顺序.

Unfortunately I do not know how many elements (w10 or w25) I will have and I do not know the order of them.

自然，我想在同一行上获取FOO1至FOO4，并在下一行获取BAR1和BAR2.但是由于计算中包括了边距，因此FOO4不合适，因为所有4个元素的宽度均为4 *(10 + 5)= 60px.

Naturally I would like to get FOO1 to FOO4 on the same row and BAR1 and BAR2 on the next row. But since the margin is included in the calculation FOO4 will not fit since all 4 elements are 4*(10+5)=60px wide.

我不能使用选择器:last 或:last-child ，因为我不知道哪一行将是最后一个元素.

I can not use the selector :last or :last-child since I do not know which element will be the last on each row.

我应该能够在一排(w25 + w25，w10 + w10 + w25或w25 + w25)中堆叠2、3或4个元素.

I should be able to stack 2, 3 or 4 elements on one row (w25+w25, w10+w10+w25 or w25+w25).

推荐答案

使用CSS不能做到这一点.

This cannot be done with CSS.

您需要使用javascript(我更喜欢使用jQuery )来确定换行的位置(因为它是任意的)

You need to use javascript (i prefer jQuery for ease of use) to identify where the lines break (since it is arbitrary)

我已将解决方案调整为确定浮动元素中的换行位置(关于固定大小元素的，但容器大小可调整)

I have adjusted my solution to Determine wrap location in floated elements (about fixed sized elements, but resizable container)

var wrapper = $('.container'),
    boxes = wrapper.children(),
    margin = parseInt(boxes.first().css('margin-right'),10);

$(window).resize(function(){
    var w = wrapper.width(),
        breaks = [],
        sofar = 0;
    
    boxes.removeClass('edge');
    
    boxes.each(function(i,e){
        var width = $(e).outerWidth(true);
        if ( (sofar + width <= w)){
            sofar += width;
        } else {
            if (sofar + width - margin <= w){
                breaks.push(i);
                sofar = 0;
            } else {
                breaks.push(i-1);
                sofar = width;
            }
        }
    });
    
    boxes
        .filter(function(i){
            return breaks.indexOf(i) > -1;
        })
        .addClass('edge');
}).trigger('resize');

.container{
    width: 55px;
}
.my_inner{
    display: inline-block;
    margin-right: 5px;
    overflow:hidden;
}
.w10{width: 10px;background-color:lightblue;}
.w25{width: 25px;background-color:lightgreen;}

.edge{margin-right:0;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class='container'>
    <div class='my_inner w10'>
        FOO1
    </div><div class='my_inner w10'>
        FOO2
    </div><div class='my_inner w25'>
        FOO3
    </div><div class='my_inner w10'>
        FOO4
    </div><div class='my_inner w25'>
        BAR1
    </div><div class='my_inner w25'>
        BAR2
    </div>
</div>

这篇关于如何删除行的最后一个元素上的边距的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！