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

Question

我想使用 div 创建响应式 table 布局，仅在 移动设备 上显示，其中仅使用 CSS/CSS3 而不是 JavaScript，也不使用 jQuery 或插件 .

，元素的每一行具有相等的高度
我找到了一个工作示例，它使用 JS：这里是 CODEPEN live example。

我进行了研究，但我没有找到任何使用 纯 CSS/CSS3/HTML5（例如 flexbox）的工作示例.

最好只有浮动 divs，没有 hack 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 告诉弹性项目沿着 cross axis 填充可用的 space。这就是允许所有项目具有相等高度的原因。

flex-wrap: wrap 提供了制作多行弹性流的可能性。否则，所有项目都被囚禁在一行中。

max-width: XX% 默认情况下，块元素将填充所有可用的 space。即使项目是 flex 布局的子元素，由于 flex-wrap 规则取消了将所有项目堆叠在一行中的限制，它们将延伸到容器的整个宽度。因此，设置一个最大宽度（一定会提高）可以控制您想要在一行中放置多少个项目。

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

Flexbox 资源：
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);
        });
    }
});

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

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

的输出

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

Responsive equal height columns in rows with CSS3/HTML5 Only

html

css

grid

mobile

responsive-design

移动布局

平板电脑布局

桌面布局