html - 定位不同长度的列表项

标签 html css

<分区>


想改进这个问题吗? 通过 editing this post 添加细节并澄清问题.

关闭 9 年前

我有一个包含数千个 li 项的 ul 列表。发生的情况是我有一个固定宽度但高度可变的 li,具体取决于其中的内容,例如评论、图像等。

现在我的列表水平流动通过用户的屏幕并转到新行。然而,问题是下一行的第一个 li 并没有坐在前一行的第一个 li 旁边,而是占据了前一行最长的 li 并保持在它下面。

例如,http://oi47.tinypic.com/21kgqkw.jpg

这可以做到吗?

根据 Chris 的要求更新 1: 请看我的图片你就明白了。基本上,所有的 lis 都需要从一行到另一行在垂直方向上彼此靠近

最佳答案

没有简单的方法可以像在纯 html/css 中那样实现垂直流,但是有一个 jquery 插件可以做类似的事情。你应该看看 Masonry

看看 Basic Single Column Demo

关于html - 定位不同长度的列表项,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/11417512/

上一篇:html - 生产网站的图片 GET 请求

下一篇:php - CSS PHP 错误 div 容器

相关文章:

CSS/CSS3 切换元素位置

javascript - Node.js 工作正常,除非直接使用 localhost

javascript - 功能检测自动播放 HTML5 音频 - 移动浏览器上的音频

css - 保留 div 父级高度以及子级 div 内容水平居中

html - 如何让 2 个元素在 CSS 中共享相同的翻转状态?

css - 颜色渐变不显示

css - HTML 输入溢出添加填充 (Firefox)

javascript - Firefox 中的 td 高度不同

html - 如何使列表中的元素符号点对齐

html - 如何在 Django 中自定义单选按钮