0

因此，我一直在寻找如何使父 div 的高度等于其最大子级的高度，同时使所有子级都具有相同的最大高度，并在所有可能包含图像的子级上强制水平垂直中心。简而言之，使用具有两列和一行的表格的结果，其中 align 和 valign 设置为 center。

对于以下html，

<div class="outer">
    <div class="inner">
        <div class="col1">
        </div>
        <div class="col2">
        </div>
    </div>
</div>

用于使所有子级具有相同（最大）高度的CSS，以便在扩展父级以包含而不隐藏其子级数据的同时，可以使每列的内容居中是......？

最初我尝试使用它，但它没有正确地将每列扩展到最大高度，从而阻止了每个子项内容的所需垂直居中。

有些人还建议使用overflow: overlay;or overflow:auto;css 属性，但这会在各处产生滚动条。

任何帮助都会很棒......现在桌子看起来非常好......

4

1 回答 1

2

你试过display:inline-block;吗？

.col1,.col2
{
    display:inline-block;
    vertical-align:middle;
    width:200px;
    border-style:solid;
}
.inner
{
    border-style:solid;
    text-align:center;
}
.col1
{
    height:300px;

}
.col2
{
    height:200px;
}

两根柱子将彼此相邻，并且 的高度.inner将由最高的柱子决定，在这种情况下，.col1。看看：演示

于 2013-03-15T08:39:51.793 回答