固定高度内嵌块div

Question

这是我的css

.f0{display: inline-block; padding: 5px;margin: 5px;height: auto;box-sizing: border-box}

这是我的html

<div>
<div class="f0" style="width:33%">1 line of data</div>
<div class="f0" style="width:33%">2lines of data<br/>I love foo</div>
<div class="f0" style="width:33%">3lines of data<br/>Love Bar too<br/>coffee too</div>
</div>

它将呈现如下(不同的高度)，我也希望他们都在一行，，但有时是第三行。div转到下一行。

+--------------+  +--------------+  +--------------+
|1 line of data|  |2lines of data|  |3lines of data|
+--------------+  |I love foo    |  |Love Bar too  |
                  +--------------+  |coffee too    |
                                    +--------------+

但我喜欢像这样的输出表

+--------------+  +--------------+  +--------------+
|1 line of data|  |2lines of data|  |3lines of data|
|              |  |I love foo    |  |Love Bar too  |
|              |  |              |  |coffee too    |
+--------------+  +--------------+  +--------------+

现在我怎么解决这个问题呢？height:100%也不起作用。

主要问题：

我并不坚持用这种方法来解决这个问题(但更喜欢)，我还尝试了display:table-cell及其相关的东西，除了ie6和ie7之外，一切都很好，所以任何使用div的方法(没有任何js)都需要预期的输出。

Answer 1

也许你可以使用display:inline-table;

​

.f0 {
  display: inline-table;
  padding: 5px;
  margin: 5px;height: auto;
  box-sizing: border-box
}

<div>
  <div class="f0" style="width:33%">1 line of data</div>
  <div class="f0" style="width:33%">2lines of data<br/>I love foo</div>
  <div class="f0" style="width:33%">3lines of data<br/>Love Bar too<br/>coffee too</div>
</div>

​

Answer 2

经过大量的思考和思考，我认为在不使用JS的情况下，实现您所追求的目标的唯一方法是向您的标记添加额外的元素。

我们可以使用额外的元素来跨越最高的内容的高度，但这样做将需要我们使用一个固定的高度在父母和100%的孩子。我们可以通过在父元素上使用position: relative和在.background元素上使用position: absolute的组合来避免这一点。通过指定一个top: 0和bottom: 0位置，它将强制元素跨越整个高度。

但是，这些元素需要匹配div块的宽度，因此我们在单元格和背景类之间共享宽度属性。

这与IE6和7非常不同，后者需要隐式设置左维才能工作，因此我们使用条件注释和一组冗余类(.one、.two、.three)为浏览器设置小于或等于IE7的左侧位置。

最终的结果是这样的(注意，条件注释与HTML在一起)：

​

.container {
    position: relative;
    width: 400px; /* you don't need this it's just for practicalities */
    overflow: hidden;
}
.f0,
.f0Background {
    width: 33.333%;
    color: #fff;
    float: left;
}
.f0 {
    z-index: 1;
    position: relative;
}
.f0Background {
	position: absolute;
	top: 0;
	bottom: 0;
	background: #333;
}

<!--[if lte IE 7]>
<style>

.f0Background.one {
    left: 0;
}
.f0Background.two {
    left: 33.333%;
}
.f0Background.three {
    left: 66.666%;
}
</style>
<![endif]-->

<div class="container">
    <span class="f0Background one"></span>
    <div class="f0">Cell 1.</div>
    <span class="f0Background two"></span>
    <div class="f0">Cell 2.</div>
    <span class="f0Background three"></span>
    <div class="f0">Cell 3 pushes the content all the way down using this text which serves no purpose other than to push the content down..</div>
</div>

​