仅使用CSS3 / HTML5的行中响应相等的高度列

Question

我想创建一个使用div的响应式表格布局，仅显示移动设备，其中每个元素的高度相等行只使用CSS / CSS3而不是JavaScript，也不使用jQuery或插件。

我找到了一个工作示例，使用JS ：这里是CODEPEN live example。

我做了一项研究，但我没有找到任何使用仅使用纯CSS / CSS3 / HTML5（例如flexbox）的实例。

最好只有浮动div，而且没有黑客CSS代码：布局应该有不同的列号，根据不同的设备大小，工作响应如下截图：

移动布局

平板电脑布局

桌面布局

Answer 1

flexboxes和media queries的解决方案： http://jsfiddle.net/szxmw7ko/4/

#container{
  display: flex;

  align-items: stretch;
  flex-wrap: wrap;
} 


@media (max-width: 480px) {
    #container div {
        max-width: 98%;
    }
}
@media (min-width: 480px) and (max-width: 1080px) {
    #container div {
        max-width: 48%;
    }
}
@media (min-width: 1080px) {
    #container div {
        max-width: 23%;
    }
}

align-items: stretch 告诉flex项目填充cross axis上的可用空间。这允许所有项目具有等于高度的内容。

flex-wrap: wrap 可以制作多行灵活流程。否则，所有项目都会被绑定到一行。

max-width: XX% 默认情况下，一个块元素将填充所有可用空间。即使项目是flex布局的子项，由于flex-wrap规则提升了在一行上堆积所有项目的约束，它们将在容器的整个宽度上延伸。 因此，设置最大宽度（必然会增加）可以控制一行中您想要的项目数。

@media (max-width: XX%) 最后，您只需调整项目的宽度即可根据视口的大小定义所需的列数。

Flexboxes资源：
https://css-tricks.com/snippets/css/a-guide-to-flexbox/
https://css-tricks.com/almanac/properties/f/flex-wrap/

Answer 2

我同意hot_barbara，如果你需要支持任何传统的IE浏览器，那么很遗憾，flexbox不是一个选择。有很多解决方案只使用css，但很多人认为你有一行元素/网格项。

我在jQuery中编写了自己的javascript解决方案，这里有完整的文章：https://www.tenpixelsleft.com/responsive-equal-height-grid-columns/

我们的想法是，您可以传递一个选择器，该选择器以给定集合中的所有网格元素为目标，然后它将根据集合中最高的值保持所有网格元素的高度相同。

/* ==================================================== *
 *  @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);
        });
    }
});

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

Answer 3

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

.box{
    background: #ffffff;
    padding: 20px;
    border-radius: 2px;
    min-height: 178px;
    height: 100%;
    box-shadow: 0 4px 2px -3px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

请找到上述 CSS 的输出