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方法，但是当我点击“详细信息”按钮时，网格正在制动。具有当前功能的网站：link

Answer 1

通常，每隔2和3项使用float，float:right 选定的产品应该有一个'选定'的类; 不要使用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）。

删除产品网格中的父div

1 个答案: