0

我想将文本与容器底部对齐。我知道我可以position: relative;在容器和position: absolute; bottom: 0;内部元素上使用来完成此操作。但是，我有像这样的浮动元素：

    float: left;                 .align-bottom (and also float: left)
++++++++++++++++++++++++++++++++++++++++++++++++
+     #blah                    |               +
+                              |               +
+ Title            btn1 btn2   | TEXT          +
++++++++++++++++++++++++++++++++++++++++++++++++

左侧浮动元素的大小不固定。

如何使用 CSS 和 HTML 将TEXT对齐到正确容器的底部？

到目前为止，我已经尝试过：

.align-bottom {
  /* the 2nd floated element, on right side */
  position: relative;
  overflow: auto;
  height: 100%;
}
.align-bottom div {
  position: absolute;
  bottom: 0;
}

CSSDesk：http : //cssdesk.com/kNE98（类似 jsFiddle，但没有 JS）

我已经看到了一些相关的问题（虽然不是很多两个浮动容器），包括：垂直对齐与绝对定位但它没有太大帮助，因为浮动部分的高度相同。

4

2 回答 2

0 
body{position:relative}
.align-bottom {
  position: absolute;
  bottom: -50px;
}

不要在 CSSDesk 上签入，因为 iframe 的高度为 100%，它会将底部 div 发送到页面底部。但是使用此代码，div 将位于正文的底部。

于 2013-03-04T22:35:56.910 回答
0

因此，我在您希望具有相同高度的两列周围添加了一个父包装器，以及一个使包装器成为浮动元素的完整高度的 cf（clearfix）类。然后我设置了元素的宽度（29%），使它恰好位于“左”div 的右侧。使用绝对位置并将其设置为底部：0 让它坐得很好。

这是带有正确代码的 cssdesk 链接：http: //cssdesk.com/SjSFQ

问候

于 2013-03-04T22:38:49.427 回答