css - float 并对齐到元素的底部

Question

如何同时对齐:元素 A 旁边的 float:right 元素 B 和 C，以及 对齐 元素 B 到元素 A 的底部，元素 C 到顶部:

当我将 float 添加到元素 B 和 C 时，这两个元素与元素 A 的顶部对齐，我想要的内容如下图所示:

PS: 元素 A 没有固定大小。

Answer 1

我认为这不能用 float 来完成。我会尝试将 div C 和 B 嵌套在 A 内，然后相对于 A 绝对定位它们。

所以像这样:

HTML

<div class="a">a
    <div class="b">b</div>
    <div class="c">c</div>
</div>

CSS

.a {
    margin-left: 60px;
    position: relative;
}
.b, .c {
    position: absolute;
    left: -60px;
}
.b {
     bottom: 0;
}
.c {
     top: 0;
}

参见jsfiddle示例。