【问题标题】:Twitter Bootstrap grid Vertical align bottomTwitter Bootstrap 网格垂直对齐底部
【发布时间】:2012-10-15 22:45:13
【问题描述】:

所以我一直在这似乎永远无法弄清楚。由于图像,我有一个包含不同高度内容的网格,我试图让它们全部对齐底部但没有运气。我已经尝试了我在这里看到的东西,但是没有,在我的 jsfiddle 中评论了

http://jsfiddle.net/qXT6K

【问题讨论】:

  • 你能解释更多你想要做什么,你想要 .sizes 块行对齐到页面底部吗?

标签: css twitter-bootstrap


【解决方案1】:

这是您想要的(我认为的)小提琴的更新版本:http://jsfiddle.net/qXT6K/34/

您与position: absolute; bottom: 0; 走在正确的轨道上;这只是获得正确偏移量的问题。

我给容器 div 一个高度只是为了显示底部对齐。你确实需要给它一个高度,否则它的所有孩子都绝对定位,它将默认为 0。

要使容器 div 居中(使其所有子项都居中),您需要使用 margin-left: automargin-right: auto(简写 margin: 0 auto),以及在 div 上设置宽度(通过 @ 类应用987654326@ 在我的示例中),加上删除捆绑到所有 span-classed 元素中的 float 属性。您还需要 padding-right: 40px 将容器的子代居中,占 margin-left: 20px 也适用于 .span-s。

【讨论】:

    【解决方案2】:

    这是你想要的吗? http://jsfiddle.net/UxYnV/

    更新 现在元素居中:http://jsfiddle.net/UxYnV/2/

    【讨论】:

    • 这就是我正在尝试的,但在您的示例中它不再居中
    • 所以我在我的测试站点上尝试了这个只是为了查看它只是与文档窗口的底部对齐。我认为这就是为什么 available 需要相对定位以使这些元素保持在同一区域。
    • 很抱歉,但也许提供更多细节会帮助我们帮助您...您希望元素在底部对齐,它们是...您现在到底想要什么?你有我们可以结帐的网址吗?也许一个完整的例子可以帮助我们准确了解您的需求。
    • 好的,我会再试一次,对不起,我解释得太糟糕了。 div.sizes 需要在 div.available 中,我在 div.available 上方和下方都有元素我希望 div.sizes 现在显示,但它们的内容要与 div.available 底部对齐。希望这会有所帮助。
    猜你喜欢
    • 2014-05-06
    • 2021-11-03
    • 2023-03-12
    • 2017-01-19
    • 1970-01-01
    • 2014-04-19
    • 2018-08-23
    • 1970-01-01
    • 2016-12-31
    相关资源
    最近更新 更多