CSS 表格，不同尺寸

Question

我正在开发一种响应式布局，它将一些 <div> 框显示为矩形网格的一部分：

http://sl.cosd.com

您在此页面上可以看到的六个框在 HTML 源代码中均未分组，全部排成一行：

<div class="control">
<div class="controlContent">
<a>SOME VARIABLE-HEIGHT CONTENT including an image which might float</a>
</div>
</div>

control div 首先将框的百分比宽度分配给整体，然后是屏幕宽度的 1/2 或 1/3，因此随着屏幕尺寸的增加，它们会加倍或加倍成行。 controlContent div 分配诸如填充、边距、背景、border-radius 等属性。

我把它想象成一组线性的框，符合标准且对屏幕阅读器友好，可以像表格一样通过 CSS 显示。我知道 CSS2.1 允许为元素分配如下属性：

display: table;
display: table-row;
display: table-cell;

我的主要问题：我已将 display: table-cell 分配给这些元素（通过 controlContent div），这可以防止内容内的边距折叠，但不提供单元格状 div 的统一高度。 我需要一种方法让同一行上的所有兄弟姐妹的高度匹配。

较小的单元格下方通常有间隙，渐变背景仅覆盖单元格的框高。 （更糟糕的是，这个单元格数组之后的文本有时会填补这些空白：另一个可以通过演示标记修复的问题，尽管当第一个问题解决后可能会消失。）

我想我了解问题的基本原理：我告诉过要表现得像表格单元格的每个 <div> 没有任何东西可以匹配它的高度，因为我无法将元素分组到包含 <div> 到我可以分配 display: table-row 属性，因为这个分组会根据 CSS 媒体查询而改变。

在阅读有关该问题的信息时，我听说过创建了 匿名表格框 和 匿名表格行，但不知道在这种情况下如何使用它们。由于我使用 CSS :nth-child() 选择器来清除每个新行开头的浮动框，我希望我也可以使用这些选择器在每个这样的点建立一个新的表格行......但是如何？

我不接受任何特定的解决方案。我只是想知道这样做的最佳实践方式。我希望找到一个不涉及演示标记的解决方案，特别是因为通用解决方案应该为任意数量的单元格提供响应式可变维度表，而不仅仅是像 6 这样的小而容易分解的数字。

Answer 1

display:table-cell; 应该给 div/columns 相同的高度，只要 父 div 设置了display:table;。

Check this fiddle（您可以添加/删除任意数量的列）。

---

另一种解决方案是给 .control 一个固定的高度，然后你可以在 controlContent 上使用height:100%;。

如果您只需要使用百分比，那么您必须在 所有 .controlContent 的 父容器 上声明一个高度，最高可达 html 和 @987654327 @：

html, body, .control, .controlContent {
    height:100%;
}

显然这只是一个简化。这是最可靠的方法，因为 table-cell 在某些旧版浏览器中无法正确呈现。

另一方面，您总是必须知道所有容器的高度（以像素或百分比为单位）。

---

然后，faux column method，但我认为它不适合你的情况。

---

最后，还有 JavaScript / jQuery 方法，在您的情况下类似于

$(document).ready(function(){
    var higherContent = 0;
    $('.controlContent').each(function() {
        var currentHeight = $(this).height();
        if( currentHeight > higherContent ) higherContent = currentHeight;
    }).height(higherContent);

});

基本上（当页面加载时）通过所有 controlContent 并设置变量 higherContent 中最高的值。然后将此值分配给所有 controlContent。

无论如何，这可能不是最好的 jQuery 函数 :-) 并且您必须针对您的媒体查询所针对的每个分辨率进行调整。

---

如果我是你，我可能会选择table-cell 方法，这样你就可以为不同的分辨率设置不同的宽度，并且布局将适应大多数现代桌面/移动浏览器。但请务必在尽可能多的设备上进行测试！

编辑：我看到您正在使用最小宽度媒体查询。你可以这样改变你的代码：

div.controlContent {
    /* other stuff */
    display: block;
    /* other stuff */
}
@media only screen and (min-width: 480px) {
    /* other stuff */
    div.controlContent {
        display: table-cell;
    }
    /* other stuff */
}