javascript - 将 div 分为 3 列

Question

我感觉我搜索了整个网络，但找不到一种方法将不同高度的 div 很好地划分为 3 列，就像 http://www.ing.nl 上那样

<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使用了Angular，这是解决问题的方法吗？如果是的话，我会深入探讨:)

Answer 1

将宽度从 width: 40%; 减少到 width: 25% 并添加 float: left; 应该会给你带来效果。正在寻找。这是一个 fiddle 演示供您回顾。 http://jsfiddle.net/yongchuc/fzesvef1/ 。

注意:增加和减少结果 Pane 的宽度以查看效果。