jquery - 流体布局 : Divs with height:auto and dynamic content

标签 jquery css layout wordpress-theming

我坚持尝试完成以下内容,基本上我有一系列自定义类型的博客文章,这些文章将显示在我在 wordpress 中的自定义模板上,这些博客文章将是高度可变的“框”,具体取决于它们的内容。

我需要解决的问题是,第二行或下一行将刷新接下来的 3 个 div,以便它们位于其上方每个 div 的下方,而不是将 div 垂直对齐到上一行的最高 div。

假设我的第一行 div,包含高度 = 120px 的 div1,高度 = 100px 的 div2,然后是高度 = 160px 的 div3。然后,无论第一行 div 的高度如何,我的第二行 div 都应在每个 div 下方显示 20px。

执行此操作的最佳方法是什么?如果有人可以给我提供一个示例,CSS 或 Jquery。将不胜感激!

最佳答案

我很确定这些不是您要找的答案。听起来您需要像 Pintrest 那样布局您的内容,如果我没有理解错的话。

我最近用过 jQuery Masonry它将元素堆叠在一个网格中并且非常通用。

我在我自己的网站上使用了它,该网站具有响应式/移动友好性,并且效果很好,对于较小的 View ,我恢复为简单的全宽堆栈。为此,我只需在较小的屏幕上禁用插件并从那里使用 css 进行修改。

关于jquery - 流体布局 : Divs with height:auto and dynamic content,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16493096/

相关文章:

xml - Android - 我应该使用多个 Activity 还是多个内容 View

java - 调整 JFrame 及其内部所有内容的大小

layout - 找不到与给定名称匹配的资源(在 'layout_marginTop'的值为'@ dimen/abc_action_bar_icon_vertical_padding

javascript - 如何在 JS 执行后延迟 CSS 和脚本加载

javascript - jquery 追加/前置/wrapInner?

html - CSS 在我的页面上不起作用

html - 移动 CSS 文件未加载

javascript - 为ajax参数添加循环

javascript - CSS 折叠类别列表

javascript - HTML - CSS 旋转 Div 未旋转 180 度