2

我无法匹配父 div 内 2 个 div 的高度。我很难向我解释我是在 Jsfiddle 上做到的。

http://jsfiddle.net/DSQpd/

基本上，我想做的是匹配高度，无论哪个更长。我已经试过height:100%;两个都穿了，但还是不行。

谢谢！

4

5 回答 5

7

去除浮动并使用

display: table-cell;

示范

于 2013-10-09T06:26:43.920 回答
0

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

于 2013-10-09T06:27:15.203 回答
0

桌子很丑。我还会考虑为您的每个项目使用 flexbox 的魔力。唯一的问题是您是否使用 Bootstrap 或其他框架提取动态数据。然后在每个 x 元素中使用 'clearfix' 类会更有意义，否则您将为自己编写更多代码。然后再一次，你总是可以只使用 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;}
于 2015-09-30T14:13:39.163 回答
-1

添加 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;
            }
于 2013-10-09T06:35:43.120 回答
-1

使用 CSS3 实现这一点的正确方法是使用灵活框。对于您的示例，添加以下内容可达到预期结果：

.post {
   display: flex;
}

这是您对上述更新的看法。

于 2013-10-09T06:48:47.443 回答