Susy Grid 2 / Grid Floats：如何垂直对齐浮动元素的底部？答案

【问题标题】：Susy Grid 2 / Grid Floats: How to verticle align bottom on a floated element?Susy Grid 2 / Grid Floats：如何垂直对齐浮动元素的底部？
【发布时间】：2017-02-15 20:20:16
【问题描述】：

假设我有一个简单的浮动网格，由 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;
   }

我的布局图片

感谢您的帮助。

【问题讨论】：

标签： css sass flexbox grid-layout susy-sass

【解决方案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);
}

这可能需要一些小的调整，具体取决于您未包含的网格细节。

【讨论】：