Question

我无法匹配父div中2个div的高度。我很难向Jsfiddle解释它。

基本上，我想要做的是匹配高度，无论哪个更长。我已经尝试将height:100%;放在他们两个上但仍然无效。

谢谢！

Answer 1

删除浮动并使用

display: table-cell;

Demonstration

Answer 2

我知道这可能不是最优雅或最受欢迎的答案，但是一种非常直接的方法是使用<table>方法在一行中使用两个单元格。易于维护，跨浏览器工作等。

Answer 3

表很难看。我还会考虑为每个项目使用flexbox的魔力。唯一的问题是如果您使用Bootstrap或其他框架提取动态数据。然后使用＆lt; clearfix＆＃39;更有意义。每个x元素类，否则你将为自己制作更多代码。然后，您可以始终只使用JavaScript来确定最高元素，并在您的div中复制它。

<div id="parent">
    <div class="child"></div>
    <div class="child"></div>
    <div class="child"></div>
</div>

#parent { display: flex; align-items: stretch; }
#child { display: flex;}

Answer 4

添加margin-bottom：-1000px和padding-bottom：1000px，容器div应该有溢出：隐藏

.post {
            width:685px;
            margin:0 0 15px 0;
            float:left;
            background:#EEE;
        overflow:hidden;
        }

            .tags {
                width:250px;
                height:100%;
                padding:0 5px 0 5px;
                float:left;
                background:#273a47;
                color:#FFF;
                padding-bottom: 1000px;
                margin-bottom:-1000px;
            }

            .content {
                width:415px;
                float:right;
                padding:0 5px 0 5px;
                background:#069;
                color:#FFF;

          padding-bottom: 1000px;
                margin-bottom:-1000px;
            }

Answer 5

使用CSS3实现此目的的正确方法是使用flexible boxes。对于您的示例，添加以下内容可实现预期结果：

.post {
   display: flex;
}

以上是您的fiddle，其中包含上述更新。

如何让2个div继承父div中div高度更高的高度？

5 个答案: