Question

使用display:table;和display:table-cell;标记简单的4列网格的最佳方法是什么，但在响应式设计中尽可能地进行调整？

示例，我在桌面版本上有4列，2行（这是完美的，我正在显示产品btw）但是当我想在表格版本上有2列时，如果我将width:50%;添加到列似乎无法正常工作。

我想知道使用这个display是否有更好的做法，或者如果我遗漏某些东西或者你们建议我采用什么方法实施我不喜欢float但你们是这里的忍者可以随意教我一些建议。

这是我的标记和我的CSS：

HTML：

<section class="products">
    <div class="products__row">
        <article class="products__item">
            <div class="products__item--thumbnail">
                <img src="img/products/thumbnail-1.jpg" alt="thumbnail-img">
            </div>
            <h2 class="products__item--title">Jabones Naturales</h2>
            <p class="products__item--info">Jabones antioxidantes a base de avena, mandarina y té verde.</p>
            <h3 class="products__item--price">60.00</h3>
            <span class="fa fa-search products__item-cart"></span>
        </article>
     </div>
</section>

CSS：

.products {
    border-spacing: 16px;
    display: table;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
    caption-side: top;
}
    .products__row {
        display: table-row;
    }
    .products__item {
        display: table-cell;
        width: 25%;
        padding-left: 1rem;
        padding-right: 1rem;
        padding-bottom: 2rem;
        background-color: white;
        text-align: center;
        outline: 1px dashed #ccc;
        outline-offset: -16px;
    }
        @media all and (max-width: 960px) {
            .products__item {
                background-color: blue;
                width: 50%;
            }
        }

修改

这是一个带有代码的JS小提琴：

http://jsfiddle.net/3r2mcv0p/

display：table-cell，不响应响应

0 个答案: