【问题标题】:align content at bottom of columns在列底部对齐内容
【发布时间】:2012-06-25 17:08:05
【问题描述】:

我正在我的网站中管理一个简单的列拆分部分,以显示某些内容的摘要。每列最后都有一个链接。这是一个示例:http://jsfiddle.net/CV4Yr/2

问题是:如何对齐部分底部的那些阅读更多链接,以便所有三个阅读更多链接水平排列?请注意,列似乎具有相同的高度,但这只是使用负边距的一种技巧。

当然,我可以想象很多 javascript hack,但我宁愿避免它们。

谢谢

编辑:我更正了指​​向正确版本小提琴的链接。现在列的高度相等。

【问题讨论】:

  • 原来如此。您必须将这些内容设置到页面底部吗?
  • 它们在 FF13 中的高度不相等。仅供参考。
  • 这是我看到的:i.imgur.com/MP4e1.png (Chrome 20b)
  • 嘿@balanza 我想要这个jsfiddle.net/CV4Yr/12
  • 这里显示正确结果的小提琴。我实现了将文章显示为“表格单元格”。您认为它是正确的,还是存在更好的方法? jsfiddle.net/CV4Yr/13

标签: html css vertical-alignment equal-heights


【解决方案1】:

由于您用于使列等高的方法,在底部放置链接会很困难。

如果您能找到替代方法,可以将这样简单的方法添加到您现有的代码中:

article {
    position: relative;
    padding-bottom: 30px;
}

article > a {
    position: absolute;
    bottom: 0; left: 0;
    height: 30px;
    padding: 0 10px;
    line-height: 30px;
}

【讨论】:

猜你喜欢
  • 1970-01-01
  • 2018-08-29
  • 2012-05-09
  • 2017-06-12
  • 2021-10-25
  • 2023-03-19
  • 2018-08-04
  • 2014-05-08
  • 2014-04-01
相关资源
最近更新 更多