2

所以你有一组内联 div。它们的宽度是硬编码的，但里面的内容可以改变，这意味着 div 的高度不同。

有什么方法可以确保所有 div 保持相同的高度，而不会有内容溢出其父 div 的危险？

我试过继承 min-height 但似乎这不是动态的。因此，如果父 div 的 min-height 设置为 320px 并且兄弟 div 继承了这个值，如果任何兄弟因为内容而变得高于 320，它和父 div 将改变，但其他兄弟将保持在320。

有什么办法可以在不使用 CSS 以外的任何东西的情况下解决这个问题？

4

1 回答 1

4

只需使用 CSS 的 table display即可。

采取以下示例标记：

<div>
    <figure>Example one</figure>
    <figure>This is example twooooo</figure>
    <figure>3</figure>
</div>

如果您希望所有三个figure元素保持恒定高度，同时确保它们永远不会超出div容器边界，只需：

div {
    display:table;
}

div > figure {
    display:table-cell;
}

所有三个figure元素现在都将保持相同的高度 - 具有最多内容的元素的高度或包含min-height分隔符的高度，以较大者为准。

这是一个JSFiddle 示例，展示了这一点。请注意我是如何赋予div灰色背景颜色的，并且figure元素永远不会逃出边界。

有关浏览器支持，请参阅：http ://caniuse.com/#feat=css-table

于 2013-08-16T14:40:16.363 回答