1

我正在开发一个响应式布局，将一些<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>

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

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

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

我的主要问题：我已经分配display: table-cell给这些元素（通过controlContentdiv），这可以防止内容内的边距塌陷，但没有为类似单元格的 div 提供统一的高度。我需要一种方法让同一行上的所有兄弟姐妹都具有匹配的高度。

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

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

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

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

4

1 回答 1

0

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

检查这个小提琴（您可以根据需要添加/删除任意数量的列）。

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

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

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

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

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

然后，有假列方法，但我认为它不适合你的情况。

最后，还有 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 */
}
于 2012-09-25T23:25:36.413 回答