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

<强> Cross browser support for display:table-cell

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

Answer 2

只需添加vertical-align:top;

即可

示例：

.myclass {
    display: inline-block;
    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，则不能使用内联块或表格单元格。

只需使用float：left即可安全...

否则你将使用单独的css登陆IE7。

Answer 5

很容易为lte ie8添加样式表，重置你的属性以显示：block，float：left，并使总宽度超出99％而不是100％。这将为您提供所需的功能。

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

5 个答案: