In che modo i Div orizzontali possono essere legati l’un l’altro in modo tale che quando uno cresce verticalmente, uno “associato” cresce verticalmente con esso?

Ho bisogno di creare un modulo che abbia tre div orizzontali che sono correlati, un po ‘come le righe in una tabella html o le celle in un foglio di calcolo.

Quello che voglio dire è con questa serie di div orizzontale:

Column1 Column2 Column3 

… quando Column2 aumenta in altezza (a causa degli elementi che vengono aggiunti dynamicmente ad esso), Column1 deve crescere verticalmente in linea con esso.

Allo stesso modo, ma “ily” più complesso, Column2 può avere più raggruppamenti di elementi correlati. Ogni raggruppamento deve essere legato verticalmente a una delle “righe” in Column3.

IOW, Column1 crescerà in altezza quando Column2 aggiunge “rows”, quindi “ombreggia” Column2 in quel modo; ma poi, quando gli elementi vengono aggiunti alla prima sezione di Column3 (che sono associati alla prima “riga” di Column2), Column2 ombreggia l’altezza della prima raccolta correlata di elementi nella prima sezione di Column3.

Forse una rappresentazione visiva sarebbe più chiara:

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

… quando si aggiunge un secondo turno il venerdì:

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

… Column1 mantiene il passo verticale con Column2 quando è stato aggiunto Shift2 per venerdì.

Ora, più elementi vengono aggiunti a Column3 per Friday’s Shift1 e Shift1 si espande verso il basso / verticalmente per adattarlo:

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

In che modo questa interrelazione può essere stabilita e mantenuta? Come può essere fatto in Bootstrap (o altrimenti, per quello)?

Il modo più semplice e probabilmente più efficace per realizzare il layout a 3 colonne in cui ogni div mantiene sempre uguale altezza con le altre due è con l’elemento table HTML.

HTML

 
DIV #1
DIV #2
DIV #3

CSS

 table { table-layout: fixed; } col { width: 100px; } td { border: 1px solid black; font-size: 1.5em; padding: 10px; } 

In questa demo, qualsiasi quantità di testo inserita in qualsiasi div conterrà tutte le altre altezze div . http://jsfiddle.net/n7170pxg/1/

Dai un’occhiata a questi due articoli per la visualizzazione: tabella e display: table-cell. Potrebbero essere la risposta a ciò che stai cercando.

http://colintoh.com/blog/display-table-anti-hero

http://www.senktec.com/2014/01/using-css-display-table-cell-for-columns/

L’ultimo collegamento sembra essere la soluzione migliore.

HTML

 
Column 1.
Column 2 is a bit longer.
Column 3 is longer with lots of text in it.

CSS

 .container { display: table; } .column { display: table-cell; width: 100px; }