当前位置：文江博客话题详情

如何将浮动div垂直对齐到底部？

发布于 2024-11-10 02:45:52 字数 566 浏览 3 评论 0原文

因为示例规则： http://jsfiddle.net/rudiedirkx/wgue7/

我如何获得酒吧到底部而不是顶部？现在它们粘在容器的顶部（#bars），但我希望它们粘在底部。

正如你所看到的，我不知道最高条的高度，所以我也不知道容器的高度。

这些 q+a 没有帮助：垂直对齐浮动 div、垂直对齐浮动 DIV

应该很简单吧？如果有帮助：它只需要在合适的浏览器中工作。

附言。条形的数量是可变的（示例中没有）并且它们的高度也是可变的。只有它们的宽度是静态的。绝对定位不会有帮助，因为容器 div 没有测量值。

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

酸甜透明夹心 2024-11-17 02:45:52

这就能解决问题：

#bars {
    display: table-cell;
    border: solid 1px black;
}
#bars > div {
    display: inline-block;
    vertical-align: bottom;
    width: 5px;
    background-color: #999;
    margin-left: 2px;
}
#bars > div:first-child {
    margin-left: 0;
}

它使用父 div 上的 display: table-cell;，默认情况下应用 vertical-align: benchmark;。这改变了子 div 上对 float: left; 的需求，并允许我们使用 display: inline-block;。这也消除了 CSS 清除修复的需要。

编辑 - 根据 @thirtydot 的评论，向子 div 添加 vertical-align:bottom; 可消除底部的间隙。

因此，我改变了上面的CSS和jsFiddle。我保留了 display: table-cell; ，这样父 div 用 0 填充包裹子 div，看起来又漂亮又时髦！

This will do the trick:

#bars {
    display: table-cell;
    border: solid 1px black;
}
#bars > div {
    display: inline-block;
    vertical-align: bottom;
    width: 5px;
    background-color: #999;
    margin-left: 2px;
}
#bars > div:first-child {
    margin-left: 0;
}

It uses display: table-cell; on the parent div, which by default has vertical-align: baseline; applied. This changes the need for float: left; on the child divs and allows us to use display: inline-block;. This also removes the need for your CSS clear fix.

EDIT - Per @thirtydot's comments, adding vertical-align: bottom; to the child divs removes the gap at the bottom.

Therefore, I changed CSS above and jsFiddle. I kept the display: table-cell; so that the parent div wraps the child divs with 0 padding and looks nice and snazzy!

回复收藏 0 原文

烟雨凡馨 2024-11-17 02:45:52

灵活盒！弹性盒是最好的。

示例： http://jsfiddle.net/rudiedirkx/7FGKN/

Flexbox 使这变得非常简单（并且不要忘记正确）：

#container {
  display: flex; /* or inline-flex */
  flex-flow: row nowrap; /* is default: columns along the main-axis (row) and no wrapping to next lines */
  align-items: flex-end; /* bottom */
}
#container > div {
  /* margin etc here, but nothing layoutish */
}

就是这样两行CSS：display: flex 和align-items: flex-end。

FLEXBOX! Flexbox is the best.

Example: http://jsfiddle.net/rudiedirkx/7FGKN/

Flexbox makes this ridiculously simple (and not to forget correct):

#container {
  display: flex; /* or inline-flex */
  flex-flow: row nowrap; /* is default: columns along the main-axis (row) and no wrapping to next lines */
  align-items: flex-end; /* bottom */
}
#container > div {
  /* margin etc here, but nothing layoutish */
}

That's it Two lines of CSS: display: flex and align-items: flex-end.

回复收藏 0 原文

~没有更多了~