HTML - Div dole bez absolútnej polohy - javascript, jquery, html, css, css3

Tu je husle.

Pridal som nejaký CSS pre umiestnenie karty vpravo.

Chcel som, aby tieto záložky boli v pravom dolnom rohu kontajnera.

Ak nastavím pozíciu div na absolútne. To znamená, že zrušíte šírku obsahu záložky, ktorá môže byť zase nastavená nastavením okraja vpravo, ale že "nebude dostatočne dynamické, ak je šírka hlavičky kariet väčšia ako pravý okraj.

Existuje nejaká alternatíva, ktorá by tlačila karty do pravého dolného rohu tab-container?

Akákoľvek pomoc bude veľmi cenená.

Vopred ďakujem.

odpovede:

1 pre odpoveď č. 1

Keď môžete používať moderný css, môžete ísť flexbox.

Tu je demo: http://jsfiddle.net/5Vkx9/2/

.tab-content
{
flex: 8 1 auto;
}

.nav
{
flex: 1 0 auto;
order: 2;
align-self: flex-end;
}

Tu je tabuľka podporovaných prehliadačov: http://caniuse.com/flexbox ako vidíte, IE10 je len čiastočne podporovaná a bude potrebovať zvláštnu pozornosť: https://stackoverflow.com/a/17156937/3244925

Tu je dobrý článok o flexbox: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

---

0 pre odpoveď č. 2

Nie som si úplne istý, čo chcete dosiahnuť, ale to je to, čo chcete? Použitím position: absolute; a spodný výplň v tabuľke s obsahom.

Fiddle: http://jsfiddle.net/5Vkx9/3/

---

0 pre odpoveď č. 3

Mám nápad pridať javascript do okrajového okraja a dá sa ľahko spočítať: .tab-container výška - .nav-tabs výška.

FIDDLE: http://jsfiddle.net/5Vkx9/12/

---