css - 浮动并对齐到元素的底部答案

【问题标题】：css - float & align to the bottom of an elementcss - 浮动并对齐到元素的底部
【发布时间】：2014-02-09 23:11:26
【问题描述】：

如何同时对齐：float:right 元素 B & C 在 element A 旁边，align element B 到 element A 底部，element C 到顶部：

当我将浮动添加到elements B & C 时，这两个元素对齐到element A 的顶部，我想要的显示在下一张图片中：

PS： element A 没有固定大小。

【问题讨论】：

你会在 jsfiddle 中分享你的代码吗？
如果元素 A、B 和 C 具有固定高度，那么您可以在 B 元素上使用 margin-top 来弥合 C 和 B 之间的间隙。所以如果 A 高度 = 300px 并且 B 和 C为 100px 将 margin-top:100px 添加到 B 元素以进行偏移。
浮动元素总是尽可能地向上，将元素浮动到“底部”是不可能的。您将不得不寻找另一种方法。
element A 没有固定大小（A 是图像）。
您可能需要绝对相对于 A 定位 B 和 C。我认为这不能通过浮动来完成。

标签： css css-float vertical-alignment

【解决方案1】：

我不认为这可以用浮动来完成。我会尝试将 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 示例。

【讨论】：

【解决方案2】：

HTML

<div class="elementA">A
    <div class="elementB">B</div>
    <div class="elementC">C</div>
</div>

CSS

.elementA{
    width: 400px;
    height: 50%;
    position: relative;
    margin: 0 0 0 200px;
    background-color: #000;
}
.elementB{
    width: 200px;
    height: 150px;
    position: absolute;
    top: 0;
    left: -200px;
    background-color: #eeeeee;
}
.elementC{
    width: 200px;
    height: 150px;
    position: absolute;
    bottom: 0;
    left: -200px;
    background-color: #dddddd;
}

您还可以以 % 为单位设置元素 A 的高度。希望这就是你所追求的。 Fiddle Link

【讨论】：

【解决方案3】：

如果您可以使用 JQuery 而不仅仅是 CSS，这可以解决问题：

example

您可以动态计算每个元素的高度，然后为元素 b 添加上边距。

element b margin top = height of a - (height of b + height of c)

HTML

<div class="a">A</div>
<div class="left-column">
    <div class="c">C</div><br />
    <div class="b">B</div><br />
</div>

jQuery

$(function(){
    var ah = $('div.a').height();
    var bh = $('div.b').height();
    var ch = $('div.c').height();
    $('div.b').css('margin-top',ah-bh-ch + 'px');
});

CSS

.left-column{
    float: right;
}

.a{
    float: right;
    width: 300px;
    height: 400px;
    background-color: #7E0C89;
    color: white;
    font-size: 30px;
}

.b{
    margin-right: 5px;
    float: right;
    width: 100px;
    height: 100px;
    background-color: #F4CBF7;
    color: white;
    font-size: 30px;
}

.c{  
    margin-right: 5px;
    float: right;
    width: 100px;
    height: 100px;
    background-color: #BF72E9;
    color: white;
    font-size: 30px;
}

【讨论】：