css - 如何将列表分成两半

Question

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

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

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

从此：

进入这个：

但我不知道我有多少“红色”（它们是动态的），所以我正在努力计算last每行中的“白色”，所以我可以做到margin-right: 0;

last手动附加的示例代码：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,输出

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

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


});