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

float:right; を追加します。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

ロード時または何らかのイベントで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');
   }


});