在CSS中，我能否使行内块元素的高度对齐？

Question

在CSS中，我能否使行内块元素的高度对齐？

我曾尝试将边距设为0，将高度设为自动，以使块元素扩展至可用空间，但它仍然紧密地包裹在块元素周围。

.myclass {
    display: inline-block;
    margin: 0em;
    padding: 1em;
    height: auto;
    border: solid;
}

http://jsfiddle.net/6NQDw/

我希望两个框的高度相同，但是希望div的宽度/高度由其内容决定，而不是指定像素宽度/高度。
有没有一些填充/边距/对齐CSS或类似的东西可以使用？

- Steve Hwan

---

vertical-align:top 怎么样？ - mondi

Answer 1

如果您需要一个纯CSS解决方案，可以使用display:table-cell;，但请注意它在IE7中不起作用（我猜IE6现在已经完全被遗忘了）。

.myclass {
    display: table-cell;
    margin: 0em;
    padding: 1em;
    height: auto;
    border: solid;
}

display:table-cell的跨浏览器支持

实现您所需的最佳方法是使用JavaScript，但显式设置动态内容容器的宽度几乎总不是解决问题的正确方法。

- user188654

---

在IE7中，inline-block也不能用于块级元素，因此我猜测不需要支持IE7。 - BoltClock

当然，我只是提供选择。 - user188654

table-cell很诱人（在表格之外使用可以吗？），但有没有一种方法来保留.myclass块之间的空间？当我切换到table-cell时，它会折叠间距，并且添加边距似乎无法在边框线之间获得任何空间。http://jsfiddle.net/6NQDw/18/ - Steve Hwan

@BoltClock inline-block 不起作用，但是您可以通过使一个 inline 元素具有布局来创建相同的效果。星号 hack 将起作用：在 IE6/7 中，zoom:1; *display:inline 与明智的浏览器中的 inline-block 做的一样。 - robertc

使用 display: table-cell 和 border-spacing。 @SteveHwan 点击这里。 - robertc

Answer 2

只需添加vertical-align:top;

示例：

.myclass {
    display: table-cell;
    margin: 0em;
    padding: 1em;
    height: auto;
    border: solid;
    vertical-align:top;
}

<div>
    <div class="myclass">
        line 1<br />
        line 2<br />
        line 3<br />
    </div>

    <div class="myclass">
        line 1<br />
        line 2<br />
        line 3<br />
        line 4<br />
        line 5<br />
        line 6<br />
    </div>
</div>

- mondi

---

结果显示细胞高度不一。 - MickaelFM

@MickaelFM，我已经调整了代码，现在它可以工作了。 - AutoBaker

Answer 3

你可以使用display: table-cell;来使盒子的高度相等。

- comradelion

---

如何让每行的物品数量可变？ - Costa Michailidis

Answer 4

如果您想获得对IE7的支持，则不能使用inline-block或table-cell。

只需使用float:left就可以保险了...

否则，您将不得不为IE7单独使用CSS。

- Geocrafter

---

我认为浮点数也无法实现相等的高度。http://jsfiddle.net/6NQDw/17/ - Steve Hwan

如果您知道两个框中的内容，那么您只需将“height”添加到“myclass”中。但是，如果您预计框内的内容可能会更改，则需要在IE7中解决此问题。 - Geocrafter

Answer 5

为lte ie8添加样式表很容易，将属性重置为display:block、float:left，并将总宽度设为99%，而不是100%。这样可以在所有旧版本中获得所需的功能。

- user3686007

---

在 Stack Overflow 上，我们分享代码，你能否编辑你的答案，使其适用于原始帖子的问题范围？ - Anthony