jquery - 如何将水平的 Div 相互关联，以便当一个垂直增长时，一个 "associated"的 Div 也随之垂直增长？

Question

我需要创建一个具有三个相互关联的水平 div 的表单，有点像 html 表格中的行或电子表格中的单元格。

我的意思是这一系列的水平 div:

Column1     Column2     Column3

...当 Column2 的高度增长时(由于动态添加的元素)，Column1 必须与其同步垂直增长。

类似地，但“ily”更复杂，Column2 可能有多个相关元素分组。每个分组都需要垂直绑定(bind)到 Column3 中的“行”之一。

IOW，Column1 的高度将随着 Column2 添加“行”而增加，从而以这种方式“遮蔽”Column2；但是，当元素添加到 Column3 的第一部分(与 Column2 的第一“行”关联)时，Column2 将遮盖 Column3 的第一部分中第一个相关元素集合的高度。

也许视觉表示会更清楚:

Column1     Column2     Column3
======      ======      ======
Fri Aug 21  Shift 1     Something about Shift1
Sat Aug 22  Shift1      

...当周五增加第二个类次时:

Column1     Column2     Column3
======      ======      ======
Fri Aug 21  Shift 1     Something about Shift1
            Shift 2     
Sat Aug 22  Shift1      

...在周五添加 Shift2 时，Column1 与 Column2 保持垂直步调。

现在，更多元素被添加到 Column3 以用于星期五的 Shift1，并且 Shift1 向下/垂直扩展以容纳它:

Column1     Column2     Column3
======      ======      ======
Fri Aug 21  Shift 1     Something about Shift1
                        Something more about Shift1
            Shift 2     
Sat Aug 22  Shift1      

这种相互关系可以通过什么方式建立和维持？如何在 Bootstrap 中(或其他方面)完成此操作？

Answer 1

实现每个 div 始终与其他两个高度相同的 3 列布局的最简单且可能是最可靠的方法是使用 HTML table 元素。

HTML

<table>
    <col>
    <col>
    <col>
    <tr>
        <td><div>DIV #1</div></td>
        <td><div>DIV #2</div></td>
        <td><div>DIV #3</div></td>
    </tr>
</table>

CSS

table {
    table-layout: fixed;
}

col {
    width: 100px;
}

td {
    border: 1px solid black;
    font-size: 1.5em;
    padding: 10px;
}

在此演示中，您在任何 div 中放入的任意数量的文本都将占用所有其他 div 的高度。 http://jsfiddle.net/n7170pxg/1/