/ / HTML - 絶対位置を指定しないで下部に移動する - javascript、jquery、html、css、css3

HTML - Divを絶対位置なしで下に移動する - javascript、jquery、html、css、css3

ここには フィドル.

私はタブを右に配置するためにいくつかのCSSを追加しました。

私はそれらのタブがコンテナの右下にあることを望んだ。

divの位置をabsoluteに設定した場合。 これは、タブの内容の幅を無効にします。タブの内容の幅は、余白を正しく設定することで調整できますが、タブのヘッダーの幅が定義されている余白よりも大きい場合は十分に動的ではありません。

タブを右下に押し込む方法はありますか? tab-container

どんな助けでも大歓迎です。

前もって感謝します。

回答:

回答№1は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

ここにフレックスボックスに関する良い記事があります: http://css-tricks.com/snippets/css/a-guide-to-flexbox/


回答№2の場合は0

私はあなたが達成したいと思っていることを完全には分かっていませんが、これはあなたが望むものですか?使用 position: absolute; 内容ペイン上の下の詰め物。

フィドル: http://jsfiddle.net/5Vkx9/3/

ここに画像の説明を入力


回答№3の場合は0

私はjavascriptでマージントップを追加するアイディアを得ました。それは簡単に数えることができます: .tab-container 高さ - .nav-tabs 高さ。

フィドル: http://jsfiddle.net/5Vkx9/12/