Remove parent div in product grid

Question

Firstly I want to apologize for my English. I have a html template for shop and it has interesting structure of product grid in category page:

HTML:

    <div class="product-line">
        <div class="product">
            <div class="product-small"></div>
            <div class="product-big"></div>
        </div>
        <div class="product">
            <div class="product-small"></div>
            <div class="product-big"></div>
        </div>
        <div class="product">
            <div class="product-small"></div>
            <div class="product-big"></div>
        </div>
    </div>
    <div class="product-line">
        <div class="product">
            <div class="product-small"></div>
            <div class="product-big"></div>
        </div>
        <div class="product">
            <div class="product-small"></div>
            <div class="product-big"></div>
        </div>
        <div class="product">
            <div class="product-small"></div>
            <div class="product-big"></div>
        </div>
    </div>

CSS:

.content-center .product-line {
  position: relative;
  height: 238px;
  margin-bottom: 30px;
}
.content-center .product-line .product {
  position: absolute;
  color: #534741;
}
.content-center .product:nth-child(1) {
  top: 0;
  left: 0;
}
.content-center .product:nth-child(2) {
  top: 0;
  left: 330px;
}
.content-center .product:nth-child(3) {
  top: 0;
  left: 660px;
}
.content-center .product-small {
  box-sizing: border-box;
  width: 300px;
  height: 238px;
  background: #fcfcfc;
  border: 1px solid #dbdbdb;
  box-shadow: inset 0 0 10px #dbdbdb;
  padding: 20px;
  position: relative;
}
.content-center .product-big {
  box-sizing: border-box;
  width: 630px;
  min-height: 506px;
  background: #fcfcfc;
  border: 1px solid #dbdbdb;
  box-shadow: inset 0 0 10px #dbdbdb;
  padding: 20px;
  position: relative;
  display: none;
}

JS:

$('.detail').on('click', function() {
        var _this = $(this);
        var parentProduct = _this.closest('.product');
        var parentLine = _this.closest('.product-line');
        var index = parentProduct.index();

        var eq1 = parentLine.find('.product').eq(0);
        var eq2 = parentLine.find('.product').eq(1);
        var eq3 = parentLine.find('.product').eq(2);


        $('.product-small').show();
        $('.product-big').hide();
        $('.product-line').css('height', '237px');
        $('.product').removeAttr('style');


        switch (index)
        {
            case 0:
                eq1.css({'left' : 0, 'top' : 0});
                eq2.css({'left' : '660px', 'top' : 0});
                eq3.css({'left' : '660px', 'top' : '268px'});
            break;

            case 1:
                eq1.css({'left' : 0, 'top' : 0});
                eq2.css({'left' : '330px', 'top' : 0});
                eq3.css({'left' : 0, 'top' : '268px'});
            break;

            case 2:
                eq1.css({'left' : 0, 'top' : 0});
                eq2.css({'left' : 0, 'top' : '268px'});
                eq3.css({'left' : '330px', 'top' : 0});
            break;
        }

        parentProduct.find('.product-big').show();
        parentProduct.find('.product-small').hide();
        parentLine.css('height', parentProduct.find('.product-big').innerHeight());

    });

Is it possible to make same functional but use only one block where products stored.
Now I have a lot of blocks where stored 3 products(x lines per 3 products), and I need to make only one block and unlimited products. For example make something like that:

 <div class="product-line">
    <div class="product">
        <div class="product-small"></div>
        <div class="product-big"></div>
    </div>
    <div class="product">
        <div class="product-small"></div>
        <div class="product-big"></div>
    </div>
    <div class="product">
        <div class="product-small"></div>
        <div class="product-big"></div>
    </div>
    <div class="product">
        <div class="product-small"></div>
        <div class="product-big"></div>
    </div>
    <div class="product">
        <div class="product-small"></div>
        <div class="product-big"></div>
    </div>
 </div>

I'm tried to use float:left method, but when i click "detail" button the grid is braking. Site with current functional: link

Answer 1

Generally, use float , but float:right every 2nd and 3rd items selected product should have a class 'selected'; don't use style attribute (always important to separate style and content)

.product { float: left; }
.product.selected:nth-child(3n),
.product.selected:nth-child(3n+2) { float: right; }
.product.product-small { display: block; }
.product.selected .product-small { display: none; }
.product.product-big{ display: none; }
.product.selected .product-big{ display: block; }

you'll probably have problems that now #content-main is considered empty, but I believe you'll be able to manage that (try clear:both ).