Susy Grid 2/Grid Floats：如何垂直對齊浮動元素的底部？

Question

比方說，我有一個簡單的浮動網格，用susy（或其他）製作。如何讓其中一列的內容粘貼到該列的底部？

我試過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。

Flexbox可能是一個不錯的選擇，可以取代浮動（甚至使用Susy）。除了使用Susy的span mixin，還可以使用flexbox和span函數，用於flex-basis，例如flex-basis: span(3 of 12)。

你的絕對定位也可以工作。您將要整體容器上position: relative集（你沒有包括HTML），然後是這樣的：

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

可能需要根據電網的細節，你不包括一些小的調整。