ugrás a tartalomhoz

Div igazítás alulra probléma

alkony4 · 2016. Ápr. 3. (V), 12.13
Szervusztok!

A következő problémával találkoztam s szeretném a segítségeteket kérni.
Adott egy div, benne több div melyeket a main divemen belül szeretnék alulra igazítani... ezt a szokványos módon oldom meg.

1. div -> display: table
2. div -> display: table-cell; vertical-align: bottom;

Eddig, szép és jó alulra is rendezi a dolgokat, csak, hogy nemrég különböző okok miatt a divem height paraméterét ki kellett vegyem és a max-height paraméterrel kellett meghatározzam, hogy maximálisna milyen magas lehet mivel a divem tartalma dinamikus.
Probléma, hogy height paraméter nélkül viszont a vertical-align: bottom;-ra nem reagál.

(előre is elnézést de most inline stílus formázást nyomtam bele)

Fix height paraméterrel:
  1. <div style="width: 200px; height: 200px; border: 1px solid red; display: table;">  
  2.     <div style="display: table-cell; vertical-align: bottom;">  
  3.         <div style="height: 200px; display: flex; flex-flow:column-reverse wrap-reverse;">  
  4.             <div style="float: left; width: 50px; height: 50px; background-color: green;"></div>  
  5.             <div style="float: left; width: 50px; height: 200px; background-color: blue;"></div>  
  6.         </div>  
  7.     </div>  
  8. </div>  
Max-heighttel:
  1. <div style="width: 200px; height: 200px; border: 1px solid red; display: table;">  
  2.     <div style="display: table-cell; vertical-align: bottom;">  
  3.         <div style="max-height: 200px; display: flex; flex-flow:column-reverse wrap-reverse;">  
  4.             <div style="float: left; width: 50px; height: 50px; background-color: green;"></div>  
  5.             <div style="float: left; width: 50px; height: 200px; background-color: blue;"></div>  
  6.         </div>  
  7.     </div>  
  8. </div>  
Mit tanácsoltok hogyan küszöbölhetném ki a hibát?

Előre is köszönöm válaszaitokat.
‹ Google map útvonaltervező saját weboldalra kétszer megnyitott weblap session-el való megkülönböztetése ›
 ■
1

Absolute

vbence · 2016. Ápr. 6. (Sze), 09.54
...ezt a szokványos módon oldom meg.

Ez nem éppen a szokványos módja ;)
  1. <div style="position: relative;">  
  2.     Helló<br>  
  3.     Föld<br>  
  4.     Vége<br>  
  5.     <div style="position: absolute; bottom: 0; color:red;">aljára<br>kerül</div>  
  6. </div>  
A befogadó DIV position paraméterét megadva, őhozzá képest lesz értelmezve benne a `bottom` (ő lesz az offset parent).