html - Div Gallery - 尝试将 div 显示与 "left"对齐,并允许响应高度

标签 html css responsive-design

我正在尝试创建博客文章显示网格。我的fiddlehere这些 div 目前位于页面中间,这很好;但是,我想:

  1. div 的对齐方式更改为向左对齐,而不是居中对齐;因此,在生成每个帖子时,都是按照自然阅读顺序完成的。
  2. 使 div 的高度响应。我的意思是,单个 div 的高度已经响应;但是,下一行 div 将根据其上一行中最长的单个 div 的底部对齐。我希望每个 div 填充其上方的 div 未占用的空间,如下图所示 here

目前,我的代码呈现如下:this 关于我如何实现这一目标的任何想法?谢谢你!

最佳答案

你可以使用 this现代 CSS 方法(不适用于旧浏览器)

 column-break-inside: avoid; // for each content "widget"

您可以使用一些 javascript 库来实现此目的:

关于html - Div Gallery - 尝试将 div 显示与 "left"对齐,并允许响应高度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41525266/

相关文章:

javascript - 当删除同级项时,使 flex 元素自动调整大小以填充空间

CSS 图标悬停创建一个框

html - 当行未满时 Bootstrap 中心 div

css - 移动响应式设计中的可用性原则

javascript - 第一次点击 href 时出现 .collapse() 错误

javascript - 无需重新加载页面的数组中的 PHP 随机值

javascript - "Unterminated template literal"文字包含脚本标签时出现语法错误

javascript - 如何在 Html <a> 标签中使用 "ng-if"?

css - 为什么 "initial"关键字指定的 CSS 样式与默认样式不同?

jquery - 如何在响应式设计中重新排列 block 元素的顺序?