仅限CSS3/HTML5响应的行中等高列

我想使用

div

创建一个响应性的表格布局，只为移动设备显示，其中每个行的元素高度相等，只使用CSS/CSS3，不使用JavaScript，也不使用jQuery或plugin

我发现了一个使用JS的工作示例，：下面是示例

我做了一项研究，但没有发现任何只使用纯CSS/CSS3/HTML5（例如flexbox）的工作示例

最好是只使用浮动

div

s，而不使用hack CSS代码：根据不同的设备大小，布局应有不同的列号，如下面的屏幕截图所示：

移动布局

平板电脑布局

桌面布局

---

一个包含

FlexBox

和

媒体查询的解决方案

：

对齐项目：拉伸

告诉flex项目填充项目沿线的可用空间。这就是允许所有项目的高度相等的原因

flex-wrap:wrap

提供了创建多行flex流的可能性。否则，所有项目将被囚禁在一行中

最大宽度：XX%

默认情况下，块元素将填充所有可用空间。即使项目是flex布局的子项，由于

flex wrap

规则解除了将所有项目堆放在一行上的约束，它们也将延伸到容器的整个宽度。 因此，设置一个最大宽度（它必然会升高）可以控制一行中需要多少项

@media（最大宽度：XX%）

最后，您只需根据视口的大小调整项目的宽度，以定义所需的列数

FlexBox资源：

---

我同意hot_barbara的观点，如果您需要支持任何传统IE浏览器，那么很遗憾，flexbox不是一个选项。现在有很多只使用css的解决方案，但是很多解决方案都假设您只有一行元素/网格项

我已经用jQuery编写了自己的javascript解决方案，全文如下：

其思想是，您可以将一个函数传递给一个选择器，该选择器针对给定集合中的所有栅格元素，然后它将基于集合中最高的栅格元素使所有栅格元素保持相同的高度

/* ==================================================== *
 *  @param elementGroup - a group of dom objects to be iterated over and aligned
 *  @param offset - (int) offset number to be added to the height
 *  @param afterAlignment - callback function
 *  ==================================================== */
setElementGroupHeight = function(elementGroup, offset, afterAlignment) {
    var offset = typeof offset !== 'undefined' ? offset : 0;
    var tallestHeight = 0;
    var elHeight = 0;
    $.each(elementGroup, function() {
        // Since this function is called every time the page is resized, we need to reset the height
        // so each container can return to its natural size before being measured.
        $(this).css('height', 'auto');
        elHeight = $(this).outerHeight() + offset;
        if (elHeight > tallestHeight) {
            tallestHeight = elHeight;
        }
    });
    // Set the height of all elementGroup elements to the tallest height
    elementGroup.css('height', Math.ceil(tallestHeight));
    // Callback
    if (afterAlignment && typeof(afterAlignment) === "function") {
        afterAlignment();
    }
}

那么就这样称呼它：

jQuery(function($) {
    // Initialise on page load
    var postGrid = $('.post-grid .js-align-col');
    if (postGrid.length) {
        setElementGroupHeight(postGrid);
        $(window).on('resize', function(e, resizeEvent) {
            // Realign on resize
            setElementGroupHeight(postGrid);
        });
    }
});

---

在图像和字体加载竞争条件方面可能存在一些问题，这可能会扭曲初始高度计算。上面的文章链接详细介绍了如何最好地处理这些问题。

当此代码应用于桌面视图中的框时，它将自动检查并添加高度和宽度，因为它支持响应

.box{
背景：#ffffff；
填充：20px；
边界半径：2px；
最小高度：178px；
身高：100%；
盒影：0 4px2px-3pxRGBA（0,0,0,0.2），0 1px1px0 rgba（0,0,0,0.14），0 1px3px0 rgba（0,0,0,0.1）；
}

请查找以上CSS的输出

---

如果您打算支持IE（甚至IE10和11！），我不建议您使用此选项，因为只有部分支持。请参阅此处了解更多详细信息：这很好，但它会将所有单元格设置为最高的单元格，而不是一行中的单元格，而是每一行。要做到这一点，您必须了解每行中的单元格是如何排列的。。。

jQuery(function($) {
    // Initialise on page load
    var postGrid = $('.post-grid .js-align-col');
    if (postGrid.length) {
        setElementGroupHeight(postGrid);
        $(window).on('resize', function(e, resizeEvent) {
            // Realign on resize
            setElementGroupHeight(postGrid);
        });
    }
});