6

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

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

html 正在显示流程图。我想从每条车道的末端到两车道部分的底部有一条线，以获得连续图。

图表示例

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

position: absolute;
overflow: hidden;

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

感谢帮助。

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

4

6 回答 6

5

是的，纯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

于 2013-10-01T12:48:20.043 回答
3

纯 CSS 解决方案

这是该解决方案的演示。

在这个 DEMO 中，您会看到多个Rows，每个都Row可以有可变数量的列，而无需在标记中说明任何内容，也无需固定任何宽度。（宽度总是在列之间平均分配）。每列都称为ElementsHolder，并且可以有任意数量的Elements你想要的。

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

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

请注意，无论Elements 高度如何，拉伸都有效。（其中一些有 2 或 3 行文本，效果很好）

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

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

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

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

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

更多关于 flex-model 的信息可以在这里找到

于 2013-10-02T11:45:08.217 回答
2

我不知道我是否真的明白你需要什么。我试过以下

在laneContainer中添加一个新的绝对元素height: 100%与

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

加上对其他一些对象的一些小修改，你会在小提琴中找到它们......

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

是你想要的吗？

于 2013-10-07T20:57:57.307 回答
1

与其添加另一个来填充空间，不如在左列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>
于 2013-09-26T10:36:41.880 回答
1


你见过这两个插件吗？

jQuery 同位素
jQuery Mansonry

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

于 2013-10-01T13:29:06.513 回答
1

FlexBox 也值得一看。

如果你对IE10 没问题 +

自动对齐高度 (CSS)

align-items: stretch

好读这里和这里

干杯，

抢

于 2013-10-06T19:16:16.013 回答