我正在一个响应式布局中,将一些<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 div为这些元素分配了controlContent,这可以防止内容内部的边距崩溃,但不能为类似单元格的div提供统一的高度。我需要一种方法使同一行上的所有同级都具有匹配的高度。

较小的单元格通常在其下方具有间隙,其中渐变背景仅覆盖单元格的框高。 (更糟的是,此单元格阵列之后的文本有时会填补这些空白:另一个问题可以通过演示文稿标记解决,尽管当解决第一个问题时可能会消失。)

我想我了解问题的基本知识:我告诉过的每个<div>都像表单元格一样,其高度与之不匹配,因为我无法将元素分组到一个包含的<div>中,我可以分配display: table-row属性,因为此分组根据CSS媒体查询而改变。

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

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

最佳答案

只要父div设置了display:table-cell;display:table;应该为div /列赋予相同的高度。

Check this fiddle(您可以根据需要添加/删除任意多个cols)。



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

如果只需要使用百分比,则必须在.controlContent的所有父容器上声明一个高度,直到htmlbody

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

10-05 21:03
查看更多