HTML-在沒有絕對定位的情況下跳至最底端

Question

這是小提琴 。

我添加了一些CSS，用於將標簽定位在右側。

我希望這些標簽位於容器的右下角。

如果我將div的位置設置為絕對。 這將使制表符內容的寬度無效，而該寬度又可以通過設置margin-right來進行調整，但是如果制表符標題的寬度大於所定義的margin-right，則其動態性將不足。

是否可以將選項卡推到選項tab-container右下角？

任何幫助都感激不盡。

提前致謝。

Answer 1

當您可以使用現代CSS時，可以選擇flexbox 。

這是一個演示： http : //jsfiddle.net/5Vkx9/2/

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

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

這是受支持的瀏覽器表： http : //caniuse.com/flexbox ，您可以看到IE10僅部分受支持，需要特別注意： https : //stackoverflow.com/a/17156937/3244925

這是有關flexbox的好文章： http ://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 2

我有一個主意，用javascript添加margin-top。 可以很容易地算出： .tab-container高度.tab-container .nav-tabs高度。

內容： http : //jsfiddle.net/5Vkx9/12/

Answer 3

我不確定您想要實現什么，但這就是您想要的嗎？ 使用position: absolute; 內容窗格的底部填充。

小提琴： http : //jsfiddle.net/5Vkx9/3/