css-浮动&；与图元的底部对齐

如何同时对齐：

float:right

elements

B&C

紧挨着

元素A

，将

元素B

对齐到

元素A

的底部，将

元素C

对齐到顶部：

当我将浮点添加到

元素B&C

时，这两个元素与

元素A

的顶部对齐，我想要的显示在下一幅图像上：

---

PS:

元素A

没有固定的大小。

我不认为这可以通过浮动来实现。我会尝试将div C和B嵌套在A中，然后将它们相对于A进行绝对定位

比如说：

HTML

参见示例。

HTML

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

您还可以设置元素A在%中的高度。 希望这就是你想要的。

---

如果您可以使用JQuery，而不仅仅是CSS，那么这就可以做到：

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

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

HTML

CSS

---

你会在JSFIDLE中共享你的代码吗？如果元素A、B和C有固定的高度，那么你可以在B元素上使用margin top来弥补C和B之间的差距。因此，如果A高度=300px，B和C是100px，那么在B元素上添加margin top:100px来进行偏移。浮动元素总是尽可能向上移动，浮动一个元素“到底”是不可能的。你必须找到另一种方法。

元素A

没有固定的大小（A是一个图像）。你可能需要将B和C相对于A绝对定位。我认为这不能用浮动来实现。

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

.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;
}

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

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

$(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');
});

.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;
}