兄弟元素在容器中高度匹配

Question

兄弟元素在容器中高度匹配

css

24

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

其中一个div的内容比较多。如何让其他两个高度较短的div与最长的div的高度相匹配？

我尝试将 height: 100% 添加到所有的div上，但是这不起作用，因为需要在渲染之前就要在 div.container 上设置一个高度，而我不知道该设多高。

- atp

4个回答

20

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

- Twirlman

请注意，并非所有浏览器都以相同的方式解释Flexbox规范。我在这方面遇到了麻烦，请参见我的示例：http://stackoverflow.com/questions/34229644/microsoft-edge-flexbox-padding-behavior - chocolata

8

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

这个容器中的 'display: flex;' 和 'align-items: stretch;' 应该使所有子 div 的高度相同，只要它是所需的高度。

- Isaac Koh

1

这是一个非常常见的问题。看看这篇文章吧...它包含了所有的答案：

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

- Hristo

那是旧方法，也很糟糕。CSS已经发展并拥有比它更好的工具了。JS删除功能非常棒。 - KRyan

你确定你的 display: table-row; 和 display: table-cell; 解决方案是跨浏览器兼容的吗？ - Hristo

“Can I Use”网站显示它得到了广泛的支持，是的。如果你担心IE 7及更早版本不支持它，那是一个好问题，我会在我的答案中加上这一点。 - KRyan

非常酷！感谢您向我指出这一点 :) 我将来会开始回答类似的问题，提供两种解决方案。 - Hristo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- KRyan · Accepted Answer

我建议使用 display: table-row; 和 display: table-cell;。简单来说，你要做的就是创建一个表格布局，但是使用 <div> 标签，并将其样式设置为表格行和单元格。

出于语义化和可访问性方面的考虑，这比仅使用表格更好。

但总的来说，CSS 并没有太多的方法可以这样引用元素的同级。虽然 <table> 标签可以实现，但会让屏幕阅读器和其他设备感到困惑。

如果你想要更多的行，你可以有更多的带有 .container 类的 <div> ，然后再创建另一个包裹它们所有的 <div> ，并给它设置 display: table; 。

所以，使用相同的 HTML 代码，以下 CSS 可以实现你想要的效果：

.container
{
    display: table-row;
}

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

请查看Fiddle。

需要注意的是，尽管display: table;等属性被广泛支持，但IE直到版本8才添加了支持。如果您计划支持IE 7或更低版本，则必须使用更复杂的方法，例如@Hristo的方法。