在產品網格中刪除父div

Question

首先，我想為我的英語道歉。 我有一個用於商店的html模板，並且在類別頁面中具有有趣的產品網格結構：

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());

    });

是否可以使相同的功能但只使用一個存儲產品的塊。
現在，我有很多塊存儲3個產品（每3個產品x行），並且我只需要制作一個塊和不限數量的產品。 例如，做這樣的事情：

 <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>

我嘗試使用float:left方法，但是當我單擊“詳細信息”按鈕時，網格正在制動。 具有當前功能的網站： 鏈接

Answer 1

通常，使用float ，但float:right所選產品的第二個和第三個項目都應具有“ selected”類； 不要使用style屬性（對於分隔樣式和內容總是很重要的）

.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; }

您可能會遇到一些問題，現在#content-main被認為是空的，但是我相信您將能夠進行管理（嘗試clear:both ）。