如何删除一行的最后一个元素的边距

我有宽度为10px或25px的元素。这些元素全部相隔5px。我需要把它们放在一个55像素的盒子里。如何删除一行的最后一个元素的边距

<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）我会有，我不知道他们的顺序。

当然我想在同一行行上获得FOO1到FOO4，并在下一行上获得BAR1和BAR2。但由于边界包含在计算中，因此所有4个元素都是4 *（10 + 5）= 60px宽，所以FOO4将不适合。

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

我应该能够在一行上堆叠2,3或4个元素（w25 + w25，w10 + w10 + w25或w25 + w25）。

来源

2014-11-06 UlfR

我已经添加了JavaScript解决方案，因为它不能用只有CSS来完成。 – 2014-11-06 15:37:11

这不能用CSS来完成。

你需要使用JavaScript（我喜欢jQuery的，易于使用），以查明断行（因为它是任意）

我已经调整了我的解决方案，以Determine wrap location in floated elements（有关固定大小元素，但可调整大小的容器）

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>

来源

2014-11-06 14:26:21

你有这个问题有一个很好的答案！但经过我自己的一些摆弄之后，我认为你实际上可以使用css。 '.container {margin-right：-5px;}'。那有什么缺点？ – UlfR 2014-11-07 07:26:26

@UlfR如果要将其他元素放在其右侧，将会产生问题。它会拉入。 – 2014-11-11 18:16:28

-1

另辟蹊径，为第一个孩子设置不同的风格。

.my_inner{ 
    display: inline-block; 
    margin: 0 0 0 5px; 
} 
.my_inner:first-child{ 
    margin: 0; 
}

:first-child比:last-child更多的支持。

对IE8的支持，你必须使用HTML5的doctype

<!DOCTYPE html>

来源

2014-11-06 14:41:18 Gil

但是，这会给我提供与我提供的示例相同的问题，除了第一行而不是所有行之外的所有问题都存在！ – UlfR 2014-11-06 14:48:50

我会使用jQuery设置一个类。届时你的页面将被加载，最后一个孩子将被定义。

http://api.jquery.com/last-child-selector/

来源

2014-11-06 14:43:35 Paul

如何删除一行的最后一个元素的边距

回答

相关问题