css - 在 CSS 中，我可以排列内联块的高度吗？

Question

在 CSS 中，我可以排列内联块的高度吗？

我认为通过将边距设置为 0 并将高度设置为自动，块会扩展以适应可用空间，但它仍然紧紧地包裹在块周围。

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

http://jsfiddle.net/6NQDw/

我希望两个框的高度相同，但希望 div 的宽度/高度由它们的内容确定，而不是指定宽度/高度（以像素为单位）。

是否有某种填充/边距/对齐 CSS 或类似的东西我可以使用？

Answer 1

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

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

跨浏览器支持 display:table-cell

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

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>

Answer 3

您可以使用display: table-cell;使框相互匹配的高度。

Answer 4

如果要支持 IE7，则不能使用 inline-block 或 table-cell。

只需使用 float:left 以确保安全...

否则，您将只为 IE7 使用单独的 css。

Answer 5

它很容易为 lte ie8 添加样式表，将您的属性重置为 display:block、float:left，并使总宽度超出 99% 而不是 100%。这将为您提供所需的功能。