css - float div，等高 - 用额外的 div 填充空间而不会溢出

Question

我有两个不同高度的 div 列，我希望它们具有相同的高度。我使用 padding-margin hack 和以下 css 为我的 div-columns 实现了这一点:

.lane1 {
    padding-bottom: 800px;
    margin-bottom: -800px;
}

html 正在显示流程图。我想从每条车道的末端到双车道部分的底部有一条线，以形成一个连续的图表。

我试图通过一个带有类 .LineFilling 的附加 div 来实现这一点，这是一条向下的线，但我不知道该线应该有多高。所以我把

position: absolute;
overflow: hidden;

在 .lane1-class 中并使 .LineFilling-element 的高度为 600px，但这不起作用，因为显示了溢出。有没有办法让 .LineFilling-element 延伸到车道的尽头？还是进一步延伸但溢出被切断？

感谢您的帮助。

编辑:我在这里在线发布了代码:Click here to see code

Answer 1

是的，使用纯 CSS 是可能的。我使用显示表格行和表格单元格属性来实现它。

HTML:

<div class="parent">
    <div class="child">
        <p>line 1</p>
    </div>
    <div class="child">
        <p>line 1</p>
        <p>line 2</p>
        <p>line 3</p>
        <p>line 4</p>
    </div>
</div>

CSS:

.parent{display:table-row;}
.child{display:table-cell;border:1px solid #ccc;padding:10px;}
p{margin:5px 0;}

参见 fiddle .

更新:可能的解决方案 DEMO