兄弟姐妹在容器中划分匹配高度

Question

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

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

我尝试添加height: 100%到所有的divs,但它不起作用,因为它需要一个heighton div.container,我在渲染之前不知道.

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

见小提琴.

值得注意的是:虽然display: table;等.得到了广泛的支持,IE在版本8之前没有增加支持.如果你打算为IE 7或更低版​​本支持,你将被迫使用更复杂的方法,比如@Hristo.

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

超文本标记语言

<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 应该具有相同的高度，只要它具有所需的高度即可。