Question

我听说过某种div-table CSS魔法，所以我刚刚找到了一些教程，因为在我的情况下我无法制作一个合适的表格而且我做了一个看起来像这样的结构

<div class="body-div>
    <div class="cat-container">
        <div class="category"></div>
        <div class="category"></div>
    </div>
    <div class="product-container">
        <div class="product"></div>
        <div class="product"></div>
    </div>
    <div class="product-container">
        <div class="product"></div>
        <div class="product"></div>
    </div>
    <div class="product-container">
        <div class="product"></div>
        <div class="product"></div>
    </div>
    <div class="product-container">
        <div class="product"></div>
        <div class="product"></div>
    </div>
    <div class="product-container">
        <div class="product"></div>
        <div class="product"></div>
    </div>
    <div class="product-container">
        <div class="product"></div>
        <div class="product"></div>
    </div>
    <div class="product-container">
        <div class="product"></div>
        <div class="product"></div>
    </div>
</div>

所以容器是列，产品和类别是行。我想让这些div看起来像一个真正的表，所以我把它添加到我的style.css。

.body-div {
    display: table;
}
.cat-container {
    float: left;
    display: table-column;
}
.product-container {
    float: left;
    display: table-column;
}

category和product的高度不同。我尝试将display: table-cell;和display: table-row;添加到category和product，但这些都没有奏效，只是搞砸了我的设计。我的问题是product div大于category，大部分时间都会使整个表难看。并且product和product高度之间也可能存在差异。所以我需要某种CSS或Javascript方法来选择每个“行”最大的高度，并使整个事物成为一个像表格的div。

这是我创建的图像：

Image

Div-table css魔术排造型

0 个答案: