Question

我有两个不同高度的div-column，我喜欢它们具有相同的高度。我使用padding-margin hack和我的div-columns的以下css实现了这个目的：

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

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

Example of the diagram

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

position: absolute;
overflow: hidden;

<。>在.lane1-class中并生成高度为600px的.LineFilling元素，但这不起作用，因为会显示溢出。有没有办法让.LineFilling元素延伸到通道的末尾？或者进一步延伸但是溢出被削减了？

感谢您的帮助。

编辑：我在网上发布了代码：Click here to see code

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

见fiddle。

更新：可能的解决方案DEMO

Answer 2

纯CSS解决方案

Here是该解决方案的演示。

在本次DEMO中，您会看到多重Row s，每个Row可以具有可变数量的列，而不会在标记中声明任何内容，也不会修复任何宽度。（宽度总是在列之间平均分配）。每列都称为ElementsHolder，可以包含任意数量的Elements。

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

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

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

如果你想使用那种技术，你只需要实现其他类型的方框和箭头（曲线等）。

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

其中每一个ElementsHolder也是一个弹性框，但这次他的方向相反（flex-direction: column;）。

ElementsHolder的孩子是Element s＆amp; Arrow s，我不希望它们具有相同的高度，但要强烈地跨越自然高度。除了最后一个箭头，它应该跨越容器的其余部分。

使用具有适当值的flex属性实现所有这些。

有关flex-model的更多信息，请访问HERE

Answer 3

我不知道自己是否真的了解自己需要什么。我尝试了以下

使用height: 100%

在laneContainer中添加新的绝对元素

#straightLine {
    background-color: #FFBF80;
    height: 100%;
    left: 104px;
    position: absolute;
    width: 3px;
    z-index: 5;
}

加上对其他一些物品的一些小改动，你会发现它们在小提琴中......

http://jsfiddle.net/RRupc/9/

这就是你想要的东西吗？

Answer 4

不是添加另一个div来填充空格，不是更容易将类添加到左列的div，并设置样式以填充任何间距/行要求有？

所以你可以：

HTML：

<div class="twoColumn">
    <div class="column">
        <div class="step doubleRow">
            <p>One step covering two rows here</p>
        </div>
    </div>
    <div class="column">
        <div class="step">
            <p>Single size step</p>
        </div>
        <div class="step">
            <p>Single size step</p>
        </div>
    </div>
</div>

Answer 5

你见过这2个插件吗？

jQuery Isotope
jQuery Mansonry

最终有一个解决方案！？看一看。

Answer 6

FlexBox也值得一看。

如果你对IE10 +

感到满意

自动对齐高度（CSS）

align-items: stretch

好读here和here

干杯，

罗布

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

6 个答案:

纯CSS解决方案