Susy Grid 2/Grid Floats：浮動小数点の底を整列する方法を教えてください。

Question

私は、サッシー（または何か他のもの）で作られた単純なフローティンググリッドを持っていると言います。いずれかの列の内容をその列の最後に固定するにはどうすればよいですか？

私はverticle-alignとalign-itemsと他のコンボを試しましたが、運はありませんでした。そしてそれは浮動小数点で作られているので、私がflexboxを置くたびに、アイコンが右に浮かんでいるので、それは私のボタンのレイアウトを殺します。

これを行うには、どのような正しい方法がありますか？ここに私のHTMLです：

<div class="col s2 action-buttons_container"> 
    <button class="btn waves-effect waves-light action-button" type="submit" name="action">Hold Ticket <i class="material-icons right">pause</i></button> 
    <button class="btn waves-effect waves-light action-button" type="submit" name="action">Resolve Ticket <i class="material-icons right">check</i></button> 
</div> <!--end .col.s2--> 

.colを削除することはできませんどの自動的float:left適用しております。

CSSは、私は私のレイアウトの

.action-buttons_container { 
     position: absolute; 
    } 
    .action-button { 
     position: relative; 
     bottom: 0; 
    } 

画像の助けを

感謝を試してみました。

Answer 1

の簡単な回答はにはできませんが、多分誤解を招くかもしれません。それを実現させる方法はありますが、フロートを単独で使用する方法はありません。 vertical-alignプロパティは、インラインフローを基準にしたアイテムの配置の変更のみを行います。align-itemsはflexboxでのみ動作します。

フレックスボックスは素晴らしい選択肢であり、フロートを置き換えることができます（Susyを使用していても）。 Susyのspan mixinを使用する代わりに、flex-basisのspanの機能を持つflexboxを使用してください。例：flex-basis: span(3 of 12)。

あなたの絶対的な位置づけも可能です。

.action-buttons_container { 
    position: absolute; 
    bottom: 0; 
    right: 0; 
    width: span(3 of 12); 
} 

あなたが含まれていませんでしたグリッドの詳細に応じて、いくつかのマイナーな調整が必要になる場合があります：あなたはposition: relative（あなたがHTMLを含んでいませんでした）全体的なコンテナにセットした後、このような何かをしたいでしょう。