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

将您从Preload减少到width: 40%;并添加width: 25%可以让您获得正在寻找的效果。这是一个小提琴演示供您查看。 http://jsfiddle.net/yongchuc/fzesvef1/。

注意：增加和减少float: left;窗格的宽度以查看效果。

将div除以3列

1 个答案: