仅使用 CSS3/HTML5 的响应式等高列

Posted 2023-03-06

【中文标题】仅使用 CSS3/HTML5 的响应式等高列

【英文标题】：Responsive equal height columns in rows with CSS3/HTML5 Only

【发布时间】：2015-06-17 17:45:06

【问题描述】：

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

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

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

最好是只有浮动divs，没有hack CSS代码：布局应该有不同的列号，根据不同的设备大小，像下面的截图一样响应：

移动布局

平板布局

桌面布局

【问题讨论】：

How to create equal height columns in pure CSS的可能重复

【参考方案1】：

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

.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 的输出

【参考方案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);
        );
    
);

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

【讨论】：

这很好，但它会将所有单元格设置为最高单元格，而不是针对每一行的单元格。为此，您必须了解每行中的单元格是如何...

【参考方案3】：

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 沿线的可用空间。这就是允许所有项目具有相等高度的原因。

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

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

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

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

【讨论】：

如果您要支持 IE（甚至是 IE10 和 11！），我不建议您这样做，因为只有部分支持。更多详情请看这里：caniuse.com/#feat=flexbox