将 div 划分为 3 列

Question

我觉得我搜索了整个网络，但找不到像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>

我尝试了不同的方法，例如：

.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 使用角度，这是解决它的方法吗？ 如果是的话，我会深入研究:)

Answer 1

将您的从 width: 40%; 减少到 width: 25% 并添加 float: left; 应该会得到您想要的效果。这是一个小提琴演示供您查看。 http://jsfiddle.net/yongchuc/fzesvef1/。

注意：增加和减少Results 窗格的宽度以查看效果。