我正在开发一个响应式布局，将一些<div>框显示为矩形网格的一部分：
您在此页面上可以看到的六个框都在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，因此它们是双倍的＆amp;随着屏幕尺寸的增加，三重成行。 controlContent div分配填充，边距，背景，border-radius等属性。
我把它想象成一个线性的盒子，符合标准和屏幕阅读器友好，可以通过CSS像桌子一样显示。我知道CSS2.1允许为元素分配如下属性：
display: table;
display: table-row;
display: table-cell;
我的主要问题： 我已将display: table-cell分配给这些元素（通过controlContent div），以防止内容中的边距崩溃但不能为细胞样div提供均匀的高度。 我需要一种方法让同一行的所有兄弟姐妹都有匹配的身高。
较小的细胞通常在它们下方具有间隙，其中梯度背景仅覆盖细胞的盒高度。 （更糟糕的是，这些单元格之后的文本有时会填补这些空白：另一个可以通过表示标记修复的问题，但是当第一个问题得到解决时可能会消失。）
我想我理解问题的基础：我告诉他们表现得像表格单元格的每个<div>没有任何东西可以匹配它的高度，因为我无法将元素分组到包含<div> 1}}我可以为其分配display: table-row属性，因为此分组会根据CSS媒体查询进行更改。
在我读到的问题中，我听说过匿名表格框和匿名表行正在创建但在这种情况下不知道如何使用它们。由于我使用CSS :nth-child()选择器清除每个新行开头的浮动框，我希望我也可以使用这些选择器在每个这样的点建立一个新的表行......但是如何？
我没有嫁给任何特定的解决方案。我想知道这样做的最佳实践方法。我希望找到一个不涉及表示标记的解决方案，特别是因为一般解决方案应该为任意数量的单元格提供响应的可变维度表，而不仅仅是一个小的，易于理解的数字，如6。
答案 0 :(得分：0)
display:table-cell; 应为div /列提供相同的高度，只要 父 div具有{{1} } set。
Check this fiddle（您可以根据需要添加/删除任意数量的cols。）
另一个解决方案是给.control一个固定的高度，然后你可以在controlContent上使用display:table;。
如果您只需要使用百分比，那么您必须在。strongContentContent的所有 父容器上声明一个高度，最多为height:100%;和html：
body显然这只是一种简化。这是最可靠的方法，因为某些旧版浏览器无法正确呈现html, body, .control, .controlContent {
height:100%;
}
。
另一方面，您始终必须知道所有容器的高度（以像素或百分比表示）。
然后，有faux column method，但我不认为这适合你的情况。
最后，还有JavaScript / jQuery方法，在你的情况下就像
table-cell基本上（当页面加载时）通过所有controlContent并在变量$(document).ready(function(){
var higherContent = 0;
$('.controlContent').each(function() {
var currentHeight = $(this).height();
if( currentHeight > higherContent ) higherContent = currentHeight;
}).height(higherContent);
});
中设置最高值的值。然后将此值分配给所有controlContent。
可能不是有史以来最好的jQuery函数:-)而且你必须根据你的媒体查询所针对的每个分辨率调整它。
如果我是你，我可能会选择higherContent方法，以便您可以为不同的分辨率设置不同的宽度，并且布局将适应大多数现代桌面/移动浏览器。但一定要在尽可能多的设备上进行测试！
编辑：我看到你正在使用最小宽度的媒体查询。您可以这样更改代码：
table-cell