浮动div,相等的高度 - 用额外的div填充空间而不会溢出

Question

我有两个不同高度的div-column,我喜欢有相同的高度.我使用padding-margin hack和我的div-columns的以下css实现了这个目的:

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

html显示流程图.我想从每条车道的末端到双车道部分的底部有一条线,以便有一个连续的图表.

我试图通过一个额外的div与类.LineFilling实现这一点,这是一条线下降,但我不知道该线应该是多么高.所以我说

position: absolute;
overflow: hidden;

在.lane1-class中,并使.LineFilling元素的高度为600px,但这不起作用,因为会显示溢出.有没有办法让.LineFilling元素延伸到通道的末尾？或者进一步延伸但溢出被切断？

感谢帮助.

编辑:我在这里发布了代码:点击这里查看代码

Answer 1

是的,纯css是可能的.我已经使用display table-row和table-cell属性来实现它.

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;}

看小提琴.

更新:可能的解决方案DEMO

Answer 2

纯CSS解决方案

这是该解决方案的演示。

在此演示中，您会看到多个Rows，每个 sRow可以具有可变数量的列，而无需在标记中说明任何内容，也无需固定任何宽度。（宽度始终在列之间平均分配）。每列称为，并且可以有任意ElementsHolder数量的列。Elements

一行中的所有列始终具有相同的高度，并且该行中的最后一个箭头将填充该空间。

在DEMO中你可以看到3Row秒。第一个Row有起点，因此那里不需要拉伸。第二个Row有 3 ElementsHolder，在标记中没有说明任何特殊内容，其中 2 个将拉伸以填补空白。第三个Row有 2 ElementsHolder，表现如预期。

请注意，无论 s 高度如何，拉伸都会起作用Element。（其中一些有 2 或 3 行文字，而且效果很好）

如果您想使用该技术，您只需实现其他类型的框和箭头（曲线等..）

该解决方案是通过使用新的 CSS flex 模型来完成的。方向通过 设置flex-direction: row;，每行都有ElementsHolder相同宽度的 s。

其中每一个ElementsHolder也是一个弹性盒子，但这次他的方向是相反的 ( flex-direction: column;)。

孩子的身高ElementsHolder是Elements & Arrows，我不希望他们有相同的高度，而是要完全跨越自然高度。除了最后一个箭头之外，它应该跨越容器的其余部分。

所有这些都是通过使用flex具有适当值的属性来实现的。

有关 Flex 模型的更多信息，请参见此处