CSS 同级 div 匹配容器中的高度
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12716525/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Sibling divs match height in container
提问by atp
I have three divs in a container: http://jsfiddle.net/fBe9y/
我在一个容器中有三个 div：http: //jsfiddle.net/fBe9y/
One div has a lot of content. How do I get the other two divs, with less content, to match the height of the longest div?
一个div有很多内容。我如何让其他两个div内容较少的 s 与最长的高度相匹配div？
I tried adding height: 100%to all the divs, but it doesn't work because that would need a heighton div.container, which I don't know before rendering.
我尝试添加height: 100%到所有divs，但它不起作用，因为这需要一个heighton div.container，我在渲染之前不知道。
采纳答案by KRyan
I recommend using display: table-row;and display: table-cell;for this. In short, what you do is make a table layout, but using <div>tags, and then style them to behave like a table.
我建议为此使用display: table-row;和display: table-cell;。简而言之，您要做的是制作表格布局，但使用<div>标签，然后将它们的样式设置为像表格一样。
This is better than just using a table for semantic and accessibility reasons.
这比仅仅出于语义和可访问性原因使用表格要好。
But generally speaking, CSS does not give you many ways to refer to an element's siblings this way. The <table>tag does, but then it confuses screen readers and things.
但是一般来说，CSS 并没有给你很多方法来引用一个元素的兄弟元素。该<table>标签呢，但后来它混淆了屏幕阅读器和东西。
If you wanted more rows, you would have more .container<div>s, and then create another <div>wrapping them all, and give it display: table;.
如果你想要更多的行，你会有更多的.container<div>s，然后创建另一个<div>包装它们，并给它display: table;。
So with the same HTML you had, this CSS does what you want:
因此，使用您拥有的相同 HTML，此 CSS 可以满足您的需求：
.container
{
display: table-row;
}
.tile
{
display: table-cell;
width: 100px;
background: #eee;
border: 1px solid black;
}?
See Fiddle.
见小提琴。
Of note: while display: table;et al. are widely supported, IE did not add support until version 8. If you plan on supporting this for IE 7 or lower, you'll be forced to use a more complicated approach, like @Hristo's.
值得注意的是：而display: table;等人。得到广泛支持，IE 直到第 8 版才添加支持。如果您计划为 IE 7 或更低版本支持此功能，您将被迫使用更复杂的方法，例如@Hristo 的.
回答by Twirlman
You can solve this using flexbox
您可以使用 flexbox 解决这个问题
.container{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.tile{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
回答by Isaac Koh
HTML
HTML
<div id="container">
<div id="div1">1</div>
<div id="div2">2</div>
<div id="div3">3</div>
</div>
CSS
CSS
#container {
display: flex;
align-items: stretch;
}
#div1 {
display: flex;
}
#div2 {
display: flex;
}
#div3 {
display: flex;
}
this 'display: flex;' and 'align-items: stretch;' in the container should make all the children div same height, as long as it is of the desired height.
这个'显示：flex;' 和“对齐项目：拉伸；” 在容器中应该使所有孩子的 div 高度相同，只要它是所需的高度。
回答by Hristo
This is a very common question. Take a look at this article... it has all the answers:
这是一个很常见的问题。看看这篇文章......它有所有的答案：
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks
Now, here's a quick fiddle of putting that to use. Try clicking on any of the "Column #" text elements to remove them from the document... the columns will resize nicely :)
现在，这里有一个快速使用它的方法。尝试单击任何“列#”文本元素以将它们从文档中删除...列将很好地调整大小:)
http://jsfiddle.net/UnsungHero97/qUT3d/9/
http://jsfiddle.net/UnsungHero97/qUT3d/9/
HTML
HTML
<div id="container3">
<div id="container2">
<div id="container1">
<div id="col1">Column 1</div>
<div id="col2">Column 2</div>
<div id="col3">Column 3</div>
</div>
</div>
</div>
CSS
CSS
#container3 {
float:left;
width:100%;
background:green;
overflow:hidden;
position:relative;
}
#container2 {
float:left;
width:100%;
background:yellow;
position:relative;
right:30%;
}
#container1 {
float:left;
width:100%;
background:red;
position:relative;
right:40%;
}
#col1 {
float:left;
width:26%;
position:relative;
left:72%;
overflow:hidden;
}
#col2 {
float:left;
width:36%;
position:relative;
left:76%;
overflow:hidden;
}
#col3 {
float:left;
width:26%;
position:relative;
left:80%;
overflow:hidden;
}?
