CSS Float填充空格之間的差距

Question

我有一些要顯示的元素。但遺憾的是，它不能按我想要的方式工作。

這裏是它如何工作的： http://jsfiddle.net/lukasoppermann/H3Nmg/7/

我想它使紅色框填寫綠框和左側之間的空間。 它需要是動態的。容器的寬度可能會改變，元素的順序可能會有所不同。

我當然更喜歡只用css的方式，但js也很好。有沒有人有任何提示？

// EDIT 爲了澄清，該元件不能進行硬編碼或浮動到正確的，因爲元件的數量，包裝的寬度，並且還綠色元件的數量可以變化。元素的順序也會有所不同。我基本上需要元素自動排列而沒有任何整體。

那就是我想要的。

http://img526.imageshack.us/img526/613/boxsorting.jpg

Answer 1

嗨，你可以定義三個格爲這樣

CSS

.container{ 
    float:left; 
    margin-left:10px; 
} 
.top{ 
    width:100px; 
    height:100px; 
    background:red; 
} 


.middle{ 
    width:100px; 
    height:100px; 
    background:darkred; 
    margin-top:5px; 
} 
.right{ 
    width:100px; 
    height:200px; 
    background:lightgreen; 
    float:left; 
    margin-left:10px; 
} 

.bottom{ 
    float:left; 
    width:100px; 
    height:100px; 
    background:green; 
    margin-left:10px; 
} 

HTML

<div class="container"> 
    <div class="top"></div> 
    <div class="middle"></div> 
</div> 

<div class="right"></div> 

<div class="bottom"></div> 
​ 

住在這裏演示http://jsfiddle.net/rohitazad/wyvrt/1/

Answer 2

怎麼樣使用float:right到row-two股利。如果需要，您可能必須修復填充以使綠色更接近紅色。這裏http://jsfiddle.net/H3Nmg/9/

Answer 3

演示如果它看起來像這樣http://jsfiddle.net/H3Nmg/14/

減硬編碼的寬度。

Answer 4

看到代碼和演示的小提琴

小提琴：http://jsfiddle.net/H3Nmg/20/

演示：http://jsfiddle.net/H3Nmg/20/embedded/result/

注意：儘量減小容器div的窗口大小或寬度，你會看到的情況和案例產量會來。