如何将名单缩小一半

Question

我遇到一个CSS设计的小问题，我无法使其正常工作。

使用此示例代码：http://jsbin.com/EsituB/1/edit?html,css,output

当行填满时，我想让“白色”列表与“红色”列表对齐：

来自：

进入：

但是我不知道我有多少“红色”（它们是动态的），所以我对如何计算每一行中的last“白色”感到不安，所以我可以做{{ 1}}

手动附加margin-right: 0;的示例代码：http://jsbin.com/EsituB/3/edit?html,css,output

有没有很好的方法来实现这一目标？甚至使用jQuery ......

Answer 1

添加浮动：右;到ul.products-2 li.last

ul.products-2 li.last { 
  float:right;
  margin-right: 0;
}

http://jsbin.com/EjilIdO/2

http://jsbin.com/EjilIdO/2/edit?html,css,js,output

在加载或某些情况下将函数添加到函数

// no of row 
var row = 2;
// no of red item
var red= $('.products-1 li').length;
console.log(red);

// first number to be marked last
var firstnumber = Math.round(red/row)*2+row*row;
// for 2 no of row
/*
    if the set is 4, first item will be 8;
    if the set is 5, first item will be 10;
    if the set is 6, first item will be 10;
    if the set is 7, first item will be 12;

*/
/* iterating each li item*/
$( ".products-2 li" ).each(function( index ) {

   // as index is started with 0, increment index by 1 and check 
   // whether it match with firstnumber
   // if match, then append last and increment the firstnumber by row*row
   // if not match, remove last 
   if(index+1==firstnumber)
   {
           $(this).addClass('last');
           firstnumber = firstnumber + row*2;
   } 
   else
   {
           $(this).removeClass('last');
   }


});