鴻溝的div超過3列

我覺得我找遍了整個網絡，但無法找到一種方法來劃分不同高度的很好了3列就像在http://www.ing.nl 鴻溝的div超過3列

<div class="main"> 
    <div class="block13"><h3>header</h3><p>tekst</p></div> 
    <div class="block13"><h3>header</h3><p>tekst<br />test</br>higher</p></div> 
    <div class="block13"><h3>header</h3><p>tekst</p></div> 
    <div class="block13"><h3>header</h3><p>tekst</p></div> 
    <div class="block13"><h3>header</h3><p>tekst<br />test</br></p></div> 
    <div class="block13"><h3>header</h3><p>tekst</p></div> 
    <div class="block13"><h3>header</h3><p>tekst<br />test</br></p></div> 
</div>

我嘗試了不同的方法類似的div：

.block13{ 
    width:40%; 
    min-width:400px; 
    background-color:#ffffff; 
    padding:10px; 
    border-bottom:2px; border-top:1px; border-left:1px; border-right: 1px; 
    border-bottom-left-radius: 5px; border-bottom-right-radius:5px; ; border-top-left-radius:0px ; border-top-right-radius: 0px; 
    border-style: solid; 
    border-color: #b1b1b1; 
    margin-left:4%; 
    margin-top:10px; 
}

而且使用：

{ 
    -webkit-column-count: 3; 
    -moz-column-count: 3; 
    column-count: 3; 
}

但無論我怎麼努力，它不斷看起來不好。它可以對齊高度，也可以溢出。

我認爲ing.nl使用角度，這是解決它的方法嗎？如果是的話，我將深入到該:)

來源

2015-08-25 jvwh

它看起來像提供的頁面使用Bootstrap的：http://getbootstrap.com – Kryszal

可能的重複 - http://stackoverflow.com/questions/8470070/how-to-create-grid-tile-view-與-CSS –

從width: 40%;降低您width: 25%並添加float: left;應該讓你的影響，你要尋找的。這是一個小提琴演示，供您查看。 http://jsfiddle.net/yongchuc/fzesvef1/。

注意：增大或減小Results窗格的寬度以查看影響。

來源

2015-08-25 21:38:26

鴻溝的div超過3列

回答

相關問題