我感觉我搜索了整个网络,但找不到一种方法将不同高度的 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,这是解决问题的方法吗? 如果是的话,我会深入探讨:)
最佳答案
将宽度从 width: 40%;
减少到 width: 25%
并添加 float: left;
应该会给你带来效果。正在寻找。这是一个 fiddle 演示供您回顾。 http://jsfiddle.net/yongchuc/fzesvef1/ 。
注意:增加和减少结果
Pane 的宽度以查看效果。
关于javascript - 将 div 分为 3 列,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32214211/