CSS - 浮動＆對準的元件

Question

如何可以在同一時間對齊的底部：float:right元件B & C旁邊element A，和alignelement B到的element A底部，element C頂端：

當我浮添加到elements B & C，這兩個元件排列到element A頂部，我想要的是顯示對下一個圖像：

PS：element A沒有固定的大小。

Answer 1

我不認爲這可以用浮動來完成。我會嘗試一個嵌套在格C和B，然後絕對定位它們相對於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示例。

Answer 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的％的HIGHT。 希望這就是你以後。 Fiddle Link

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