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>

它将呈现如下（不同高度）的东西，我也希望所有这些都在一行中，但有时候是第3行。 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和position: absolute元素.background上使用top: 0来避免这种情况。通过指定bottom: 0和.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; }位置，它会强制元素跨越整个高度。

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

除了在IE6和7中需要隐式设置左维度才能工作之外，这一切都很有效，因此我们使用条件注释和一组redundent类（.one，.two，.three）来设置浏览器左侧位置小于或等于IE7。

最终结果如此（请注意条件注释与HTML一起使用）：

<!--[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>

{{1}}

固定高度内联块div

2 个答案: