麻煩佈局/浮動：左

Question

我剛纔問這個問題「trouble with unwanted space between divs」

現在我有一個新的問題......我的佈局，我要乘這個盒子8次這樣的：

它的工作，但現在（以後我刪除的高度），我得到這個：

這裏有一個小提琴：http://jsfiddle.net/m5t6e/ 和這裏的合作DE：

HTML（重複8次）：

<div class='image'></div> 
<div class='line1'></div> 
<div class='head'></div> 
<div class='subBox'> 
    <div class='sub'></div> 
    <div class='price'></div> 
    <div class='button'></div> 
</div> 
<div style='clear:both;'></div> 
<div class='line2'></div> 
<div class='placeholder'></div> 

CSS：

.headerimage { 
    background-color:#000; 
    height:273px; 
    left:0; 
    position:absolute; 
    right:0; 
} 
.box1 { 
    position:relative; 
    top:273px; 
} 
.produkt { 
    float:left; 
    height:318px; 
    position:relative; 
    width:224px; 
} 
.image { 
    background-color:#afeeee; 
    height:230px; 
    position:relative; 
    width:224px; 
} 
.line1 { 
    background-color:#000; 
    height:1px; 
    position:relative; 
    width:224px; 
} 
.head { 
    background-color:#eee; 
    height:25px; 
    position:relative; 
    width:224px; 
} 
.subBox { 
    height:50px; 
    position:relative; 
    width:224px; 
} 
.sub { 
    height:25px; 
    position:relative; 
    width:224px; 
} 
.price { 
    background-color:#847077; 
    float:left; 
    height:20px; 
    position:relative; 
    width:160px; 
} 
.button { 
    background-color:#6A5ACD; 
    float:left; 
    height:20px; 
    position:relative; 
    width:58px; 
} 
.line2 { 
    background-color:#000; 
    height:5px; 
    padding-bottom:20px; 
    position:relative; 
    width:224px; 
} 
.placeholder{ 
    height:800px; 
    width:800px; 
    position:relative; 
    padding-top:1000px; 
} 

Answer 1

1. 刪除.placehodler CSS樣式

2. 封裝中的每個元素div

3. 集包封div到float:left和行爲像display:inline-block DIV

4. 插入後的各4 <br>塊

檢查此jsFiddle