Question

我想将文本对齐到容器的底部。我知道我可以在容器上使用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）

我已经看到一些问题有些相关（虽然不是很多两个浮动容器），包括：Vertical Align with Absolute Positioning但它没有多大帮助，因为浮动部分的高度相同。

Answer 1

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

不要检查CSSDesk，因为iframe的高度为100％，它会将底部div发送到页面底部。但是使用这个代码，div将位于正文的底部。

Answer 2

所以我在你想要高度相同的两列上添加了一个父包装器，以及一个cf（clearfix）类，它使包装器成为浮动元素的整个高度。然后我设置元素的宽度（29％），使其恰好位于“left”div的右侧。使用绝对位置并将其设置为底部：0允许它很好地坐下。

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

此致

对齐元素绝对底部浮动容器（左右浮动）

2 个答案: