HTML - 在没有绝对定位的情况下划分到底部

Question

这是fiddle。

我添加了一些CSS，用于将标签定位到右侧。

我希望这些标签位于容器的右下角。

如果我将div的位置设置为绝对值。这将使选项卡内容的宽度无效，而选项卡内容的宽度又可以通过设置边距权限进行调整，但如果选项卡标题的宽度大于边界右边定义的那么，则不足够动态。

有没有其他方法可以将标签推到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身高 - .nav-tabs身高。

<强> FIDDLE： http://jsfiddle.net/5Vkx9/12/

Answer 3

我不完全确定你想要达到的目标，但这是你想要的吗？在内容窗格中使用position: absolute;和底部填充。

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