div3の項目をdisplay:flex
divの下に整列/スタックしようとしています。私がそれを管理できる唯一の方法は、上に4番目のdivを追加することです& javascript/jqueryを使用して、それらの3つの項目を下に押して動的に高さを調整します。フレックスコンテナの項目をフレックスコンテナの底にフレックスします
javascript/jqueryを使用せずにこれを行うための純粋なCSS3の方法はありますか?ありがとう
ここにはfiddleです。私が整列したい/底に積み重ねたい3つのdivは、.searchForm
,.tweetForm
、.myMsg
です。私は現在、.fudgeBox
を上に置くことに頼って、それらを下に押し下げています。
ありがとう、マイケル。これはエレガントです。マジックのように動作します!悲しいかな、私のjsfiddleはブートストラップ4を使用している私の真のコードを全く表現していませんでした。私の本物の.sideRightには、。sideRightが高さ:100%を取るのを防ぐと思われるclass col-md-4もあります。 .sideRght内の要素の合計これは、.searchForm {margin-top:auto; }働くことから。だから、私はまだ高さを動的に調整するためにjqueryを必要とします。私はfudge divを使用する代わりに.searchFormのマージントップを調整することに切り替えました。 – rockhammer
ええと、ブートストラップとフレックスボックスは常に良いとは言えません。あなたのCSSに '!important'を適用してブートストラップをオーバーライドすることもできますが、ヒットしてしまいます。幸運:-) –
私は理由を理解しました.searchForm {margin-top:auto; }は効力を発揮しませんでした。ブートストラップの固定フッターテンプレートは、高さ:100%の代わりに100%の高さを使用します。定義を読んで、これらの2つは同じ効果を与えるはずですが、それはしません。最小高さを高さに置き換えると、{margin-top:auto; }が働きます。 – rockhammer