CSS中的元素列破壞

Question

我正在處理5列，但裏面的元素被破壞。我試圖解決這個問題，但我沒有運氣。

鏈接：http://bit.ly/1NDAnQA

CSS：

.test-wrap {  
-webkit-columns: 5; 
-moz-columns: 5; 
columns: ; 
} 

.test-wrap .img { 
display: block; 
margin: 0 0 0.75em; 
} 

HTML：

<div class="test-wrap"> 
<div class="iefsv1"><img src="#" class="home-img"/> 
    <h3><strong style="line-height: 2.50em;">1. Shop </strong></h3> 
    Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum 
    <br /> 
    <a class="buttonv3" href="#">Go to</a> 
</div> 
<div class="iefsarrowv1"><img src="#"/></div> 
<div class="iefsarrowv1"><img src="#"/></div> 
<div class="iefsv2"><img src="#" class="home-img"/> 
<h3><strong style="line-height: 2.50em;">2. Downpayment</strong></h3> 
    Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum 
    <br /> 
    <a class="buttonv3" href="#">Go to</a> 
</div> 
<div class="iefsarrowv2"><img src="#"/></div> 
<div class="iefsv3"><img src="#" class="home-img"/> 
<h3><strong style="line-height: 2.50em;">3. Spread</strong></h3> 
Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum Loppersum 
<br /> 
<a class="buttonv3" href="#" target="_blank">Go to</a> 
</div> 
</div> 

Answer 1

你應該試試這個使用display: inline-block或float: left（你也不必CSS3實現5列，和舊的瀏覽器將不會支持它..）。切緣陰性是一個壞主意..

.test-wrap { 
    width: 100%; 

} 
.test-wrap > div { 
    float: left; 
    width: 20%; 
} 

我刪除負面保證金

或

.test-wrap { 
    width: 100%; 
    font-size: 0; 
} 
.test-wrap > div { 
    font-size: 16px; 
    display: inline-block; 
    vertical-align: top; 
    width: 20%; 
}