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

Question

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

我想通过将margin设置为0并将height设置为auto,该块将扩展以适应可用空间,但它仍然紧紧围绕块.

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

http://jsfiddle.net/6NQDw/

我希望两个框的高度相同,但希望div宽度/高度由其内容决定,而不是指定宽度/高度(以像素为单位).

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

Answer 1

你可以使用,display:table-cell;如果你需要一个纯CSS解决方案,但请注意它将无法在IE7中工作(我猜IE6现在完全被遗忘).

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

跨浏览器支持显示: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>