javascript - 如何以完美的网格样式将不同大小的 DIV float 到左侧?

标签 javascript jquery css html

这里我有一个问题。我有许多具有相同宽度的 DIV,但它们的高度不同并且向左浮动但它们没有按我想要的方式出现。它显示为

enter image description here

但我想让他们喜欢

enter image description here

那么请告诉我如何使用纯 HTML-CSS,不使用 JavaScript 或 JQuery 等来做到这一点

最佳答案

@Tom Chew-head Millard 是正确的;这是一个纯粹的 CSS 解决方案。我的经验 = 易于使用。

http://css-tricks.com/snippets/css/multiple-columns/

== 阅读 MH 评论后编辑

http://jsfiddle.net/qZ3N4/1/

#DEMO_ID {
    -moz-column-count: 3;
    -moz-column-gap: 20px;
    -webkit-column-count: 3;
    -webkit-column-gap: 20px;
}

#DEMO_ID div {
     column-break-before: always;   
}

关于javascript - 如何以完美的网格样式将不同大小的 DIV float 到左侧?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23225130/

相关文章:

javascript - JQueryUI 需要在单击的选项卡完成动画且可见后触发事件

jquery - 使用jquery获取anchor的值

CSS @keyframe 动画缓出

javascript - 在多个文件上传中删除文件时显示剩余文件数

jquery - 在动态生成的列表中选择列表元素

html - CSS 表 : fixed header and same column width for <td> and <th>

javascript - 带有 Knockout 的 HTML 实体

javascript - 用户设置 BackgroundImage。将图片 url 存储在 cookie 中,以便下次访问时加载

javascript - 如何使用 jQuery 检查元素是否中断到下一行?

javascript - 如何使用 Jison 词法分析器返回多个标记