CSS div float。推最後一個div

Question

我有5 <div>元素，他們都浮動左。

我如何可以把我的最後一個div？ （我不能使用2個包裝，因爲它們將被用jQuery重新調整大小，所有的人都必須5在同一包裝）

我不知道如果我在正確的方式解釋我的問題所以如果你有問題，請詢問。

HTML：

<div id="ModeliSadrzajAir"> 
    <div class="kocka220x140">1</div> 
    <div class="kocka220x140">2</div> 
    <div class="kocka220x300">3</div> 
    <div class="kocka220x300">4</div> 
    <div class="kocka460x140">5</div> 
</div> 

CSS：

#ModeliSadrzajAir { 
    width: 960px; 
    margin: -60px 0px 0px -10px; 
    min-height: 500px; 
    background-color: #00FFFF; 
    position: absolute; 
    z-index: 1000; 
} 

.kocka220x140 { 
    border-radius:5px; 
    width: 220px; 
    margin: 10px; 
    height: 140px; 
    float: left; 
    background-color: #FFFF00; 
} 
.kocka220x300 { 
    border-radius: 5px; 
    width: 220px; 
    margin: 10px; 
    height: 300px; 
    float: left; 
    background-color: #FF0000; 
} 
.kocka460x140 { 
    border-radius: 5px; 
    width: 460px; 
    margin: 10px; 
    height: 140px; 
    float: left; 
    background-color: #FF0000; 
} 

Answer 1

Fiddle

您對.kocka220x300的float屬性設置從left到right

我也建議你改變你的HTML至此

<div id="ModeliSadrzajAir"> 
    <div class="kocka220x140">1</div> 
    <div class="kocka220x140">2</div> 
    <div class="kocka220x300">4</div> <!-- This comes first --> 
    <div class="kocka220x300">3</div> <!-- This comes second --> 
    <div class="kocka460x140">5</div> 
</div> 

這樣一來，你的是對左側，檢查撥弄鏈接更新

Answer 2

你試過像有些插件網-A-licious .. 如果不嘗試一下..不然，如果你需要一個純粹的Css你可以看看下面的鏈接..

jsfiddle.net/chermanarun/HaV29/

Answer 3

你可以試試這個http://jsfiddle.net/modaloda/czz2Z/9/

.kocka460x140 
{ 
    border-radius: 5px; 
    width: 460px; 
    margin: 10px; 
    height: 140px; 
    float: left; 
    background-color: #FF0000; 
    position: absolute; 
    top: 160px; 
} 

Answer 4

我試圖重現你的榜樣。

基本上我認爲你需要一個包裝position:relative;包裝所有的divs和使第五個div position:absolute;和bottom:0px;。還要添加overflow:auto;，這樣你父母div中包含的最大高度將推動父div的高度（再讀一遍，你會明白：P）。

檢查此琴：

http://jsfiddle.net/R8hJ3/1/