HTML - Div para o fundo sem posicionamento absoluto - javascript, jquery, html, css, css3

Aqui está o violino.

Eu adicionei algumas CSS para posicionar a guia à direita.

Eu queria que essas guias estivessem no canto inferior direito do contêiner.

Se eu definir a posição do div como absoluta. Isso anulará a largura do conteúdo da tabulação que, por sua vez, pode ser ajustada definindo a margem-direita, mas que "não será dinâmico o suficiente se a largura dos cabeçalhos das guias for maior que a margem-direita definida.

Existe alguma alternativa para empurrar as abas para o canto inferior direito do tab-container?

Qualquer ajuda será muito apreciada.

Desde já, obrigado.

Respostas:

1 para resposta № 1

Quando você pode usar o css moderno, você pode optar por flexbox.

Aqui está uma demonstração: http://jsfiddle.net/5Vkx9/2/

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

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

Aqui está a tabela de navegadores suportados: http://caniuse.com/flexbox Como você pode ver, o IE10 é suportado apenas parcialmente e precisará de atenção especial: https://stackoverflow.com/a/17156937/3244925

Aqui está um bom artigo sobre flexbox: http://css-tricks.com/snippets/css/a-guide-to-flexbox/

---

0 para resposta № 2

Eu não tenho certeza do que você quer alcançar, mas é isso que você quer? Usando position: absolute; e um preenchimento inferior no painel de conteúdo.

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

---

0 para resposta № 3

Eu tenho uma idéia para adicionar margem superior com javascript. Ele pode ser facilmente contado: .tab-container altura - .nav-tabs altura.

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

---