在兄弟div的序列中，你能设置高度为最高值吗？ [英] In a sequence of sibling divs, can you set the height to the highest value?

问题描述

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

有什么方法来确保所有div保持相同的高度，没有内容溢出其父div的危险？

我试过继承min-height，但似乎这不是动态的。所以如果父div的最小高度设置为320px，兄弟的div继承这个值，如果任何兄弟姐妹因为内容而变得高于320，它和父div会改变，但是其他兄弟姐妹将保持

解决方案是什么？

只需使用CSS表格显示 a>。

采取以下示例标记：

 < div> 
< figure>示例一< / figure> 
< figure>这是示例twooooo< / figure> 
< figure> 3< / figure> 
< / div> 
  

如果您希望所有三个 figure 保持恒定的高度，同时确保它们从不会逃逸到 div 容器的边界之外：

  div {
 display：table; 
} 
 
 div> figure {
 display：table-cell; 
} 
  

三个图元素现在将保持相同的高度 - 含有最多内容的元素的高度或包含分隔符的 min-height 。

这里是一个 JSFiddle示例，显示此在行动。注意我如何赋予 div 一个灰色背景颜色，并且 figure 元素永远不会在边界之外逃逸。 / p>

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

So you have a set of inline divs. Their width is hard coded but the content inside can be changed meaning the height of the divs are different.

Is there any way to enure that all divs remain the same height, without having the danger of content spilling out its parent div?

I've tried inheriting min-height but it seems that this is not dynamic. So if the parent div has a min-height set to 320px and the sibling divs are inheriting this value, if any sibling were to become higher than 320 because of content, it and the parent div will change, but the other siblings will stay at 320.

Is there any way around this without the use of anything other than css?

解决方案

Simply make use of CSS' table display.

Take the following example markup:

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

If you want all three figure elements to remain a constant height whilst ensuring they never escape outside the boundaries of the div container, simply:

div {
    display:table;
}

div > figure {
    display:table-cell;
}

All three figure elements will now remain the same height - the height of the element with the most content or the min-height of the containing divider, whichever is greater.

Here's a JSFiddle example showing this in action. Notice how I've given the div a grey background colour and that the figure elements never escape outside the boundary.

For browser support, see: http://caniuse.com/#feat=css-table

这篇关于在兄弟div的序列中，你能设置高度为最高值吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！