如何将css列垂直对齐到底部？答案

【问题标题】：How can align css colums vertcally to the bottom?如何将css列垂直对齐到底部？
【发布时间】：2014-11-08 20:56:57
【问题描述】：

HTML：

<ul id="menu-main-menu">
  <li><a>Home</a></li>
  <li><a>About</a></li>
  <li><a>Portfolio</a></li>
  <li><a>Blog</a></li>
  <li><a>Contact</a></li>
</ul>

CSS：

#menu-main-menu {
  padding: 0;
  height: 77px;
  -webkit-column-count: 2;
  -webkit-column-gap: 42px;
  border: 1px solid blue;
  width:250px;
}

#menu-main-menu li{
  display: block;
  list-style: none;
  height: 24px;
  border: 1px solid red;
}

如何在“menu-main-menu”的最底部而不是顶部垂直对齐所有“li”元素？

【问题讨论】：

标签： html css vertical-alignment frontend multiple-columns

【解决方案1】：

如何在“menu-main-menu”的最底部而不是顶部垂直对齐所有“li”元素？

我不认为vertical-align可以在这里应用。

但有一种方法应该可行：使用 transform 首先在 Y 轴上翻转整个菜单 - 然后再次在列表项上将它们“返回”为可读：

#menu-main-menu {
  /* … */
  -webkit-transform:scaleY(-1);
  transform:scaleY(-1);
}

#menu-main-menu li{
  /* … */
  -webkit-transform:scaleY(-1);
  transform:scaleY(-1);
}

http://codepen.io/anon/pen/Abrxl

当然，翻转菜单会改变项目的顺序——要纠正这一点，它们在 HTML 中的顺序也必须改变：http://codepen.io/anon/pen/yxDsi这是否是你愿意做出的妥协，由你决定.

我在这里添加了-webkit- 前缀版本和无前缀版本，以及列属性的-moz- 版本，但在Firefox 中似乎有一些额外的边距或类似的东西。这似乎来自于已经应用了列属性，并且似乎不是应用转换的结果。也许你会找到一个解决方案，让自己看起来更流畅。

【讨论】：

【解决方案2】：

一种解决方案是使用 margin-top 每 4n 个 li 元素，例如：

#menu-main-menu {
  padding: 0;
  height: 77px;
  -webkit-column-count: 2;
  -webkit-column-gap: 42px;
  border: 1px solid blue;
  width: 250px;
}
#menu-main-menu li {
  display: block;
  list-style: none;
  height: 24px;
  border: 1px solid red;
  position: relative;
}
#menu-main-menu li:nth-child(4n) {
  margin-top: 24px; /*add margin top*/
}

<ul id="menu-main-menu">
  <li><a>Home</a>
  </li>
  <li><a>About</a>
  </li>
  <li><a>Portfolio</a>
  </li>
  <li><a>Blog</a>
  </li>
  <li><a>Contact</a>
  </li>
</ul>

【讨论】：

这是一个解决方案，我正在寻找更动态/自动的东西，例如垂直对齐：底部，因为它是一个动态菜单，如果我这样做，我需要编写一些 php 计数元素。我无法进行垂直对齐工作。必须有一种方法可以自动将其与底部对齐...