兄弟 div 匹配容器中的高度

Question

我在一个容器中有三个 div：http://jsfiddle.net/fBe9y/

一个 div 有很多内容。如何让内容较少的另外两个divs 与最长的div 的高度匹配？

我尝试将height: 100% 添加到所有divs，但它不起作用，因为这需要在div.container 上添加height，在渲染之前我不知道。

Answer 1

我建议为此使用display: table-row; 和display: table-cell;。简而言之，您所做的是制作表格布局，但使用<div> 标签，然后将它们设置为表格的行为。

这比仅仅出于语义和可访问性原因使用表格要好。

但一般来说，CSS 并没有给你很多方法来引用元素的兄弟姐妹。 <table> 标签可以，但它会混淆屏幕阅读器和其他东西。

如果你想要更多的行，你会拥有更多的.container<div>s，然后创建另一个<div> 将它们全部包装起来，并给它display: table;。

因此，使用与您相同的 HTML，此 CSS 可以满足您的需求：

.container
{
    display: table-row;
}

.tile
{
    display: table-cell;
    width: 100px;
    background: #eee;
    border: 1px solid black;
}​

见Fiddle。

注意：display: table; 等。是widely supported，IE 直到版本 8 才添加支持。如果您打算在 IE 7 或更低版本中支持此功能，您将不得不使用更复杂的方法，例如 @Hristo's。

Answer 2

你可以使用 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;
}

Answer 3

HTML

<div id="container">
  <div id="div1">1</div>
  <div id="div2">2</div>
  <div id="div3">3</div>
</div>

CSS

#container {
  display: flex;
  align-items: stretch;
}

#div1 {
  display: flex;
}

#div2 {
  display: flex;
}

#div3 {
  display: flex;
}

这个'显示：flex;'和“对齐项目：拉伸；”在容器中应该使所有子 div 具有相同的高度，只要它具有所需的高度。

Answer 4

这是一个很常见的问题。看看这篇文章......它有所有的答案：

http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

现在，这里有一个快速使用它的方法。尝试单击任何“列#”文本元素以将它们从文档中删除...列将很好地调整大小:)

http://jsfiddle.net/UnsungHero97/qUT3d/9/

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

#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;
}​