html - 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 提供统一的高度。 我需要一种方法让同一行中的所有 sibling 都具有匹配的高度。

较小的单元格通常在其下方有间隙，其中渐变背景仅覆盖单元格的框高度。 (更糟糕的是，这个单元格数组之后的文本有时会填补这些空白:另一个可以用表示标记解决的问题，尽管第一个问题解决后这个问题可能会消失。)

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

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

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

Answer 1

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

Check this fiddle (您可以根据需要添加/删除任意数量的列)。

---

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

如果您只需要使用百分比，那么您必须在 所有 .controlContent 的父容器 上声明一个高度，直到 html和正文:

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 */
}