水平Div如何能够彼此联系，以便当垂直增长时，“关联”一个垂直增长？ [英] How can horizontal Divs be tied to each other so that when one grows vertically, an "associated" one grows vertically with it?

问题描述

我需要创建具有三个水平的div它们是相互关联的，有点像在一个HTML表中的行或所述细胞在电子表格的形式。

我意思是这个系列的水平div：

  Column1 Column2 Column3 
  

...当Column2高度增长时（由于元素被动态添加到它），Column1必须与它一起垂直增长。

同样，但更复杂的ily，Column2可能有多个相关元素的分组。每个分组需要被垂直地绑在栏3的行中的一个。

IOW，列1将在高度成长为列2将行，从而阴影 Column2以这种方式;但是当元素被添加到Column3的第一部分（与Column2的第一个行相关联）时，Column2将在Column3的第一部分中隐藏第一个相关元素集合的高度。

也许视觉表现会更清晰：

  Column1 Column2 Column3 
 == ==== ====== ====== 
 Fri Aug 21 Shift 1关于Shift1的一些事
星期六8月22日Shift1 
  

...星期五添加第二班时：

  Column1 Column2 Column3 
 ====== ====== ====== 
 Fri Aug 21 Shift 1关于Shift1的一些事
 Shift 2 
 Sat Aug 22 Shift1 
  

...当星期五添加Shift2时，Column1与Column2保持垂直速度。

现在，为星期五的Shift1添加更多元素到Column3，并且Shift1向下/垂直向下扩展以适应te it：

  Column1 Column2 Column3 
 ====== ====== ==== == 
 8月21日星期五Shift 1关于Shift1的一些事
更多关于Shift1的信息
 Shift 2 
星期六8月22日Shift1 
  

这种相互关系是以何种方式建立和维护的？这又如何在引导完成（或者，对于这个问题）？

解决方案

最简单也可能是最可靠的方法来完成每个 div 始终保持高度相等的三列布局，其他两个布局是HTML 表元素。 / b>

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纯黑色; 
 font-size：1.5em; 
 padding：10px; 
 
 $ / code> 

在这个演示中，您放入任何 div 将会带上所有其他 div 高度。
http://jsfiddle.net/n7170pxg/1/

I need to create a form that has three horizontal divs which are interrelated, somewhat like the rows in an html table or the cells in a spreadsheet.

What I mean is with this series of horizontal divs:

Column1     Column2     Column3

...when Column2 grows in height (due to elements being dynamically added to it), Column1 must grow vertically in lockstep with it.

Similarly, but more complex"ily," Column2 may have multiple groupings of related elements. Each grouping needs to be tied vertically to one of the "rows" in Column3.

IOW, Column1 will grow in height as Column2 adds "rows", thus "shadowing" Column2 in that way; but then, when elements are added to the first section of Column3 (which are associated with the first "row" of Column2), Column2 will shadow the height of the first related collection of elements in Column3's first section.

Perhaps a visual representation would be clearer:

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

...when a second shift is added on Friday:

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

...Column1 keeps vertical pace with Column2 when Shift2 was added for Friday.

Now, more elements are added to Column3 for Friday's Shift1, and Shift1 expands downward/vertically to accommodate it:

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

In what way can this interrelationship be established and maintained? How can this be done in Bootstrap (or otherwise, for that matter)?

解决方案

The simplest and probably most robust way to accomplish the 3-column layout where each div always maintains equal height with the other two is with the HTML table element.

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

In this demo, any amount of text you put in any div will take all other div heights with it. http://jsfiddle.net/n7170pxg/1/

这篇关于水平Div如何能够彼此联系，以便当垂直增长时，“关联”一个垂直增长？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！