Html 无垂直间隙的响应栅格样式布局中的div

我有一套

div

s（卡片）。每一个都有一个标题、描述和图像（所有长度/大小都不同）

我想在屏幕上“漂亮地”显示这些

我所说的“漂亮”是指我希望图像是一个缩略图——在标题和描述之后水平居中

更重要的是，我希望卡（包含

div

）一个接一个地放置（水平然后垂直），并且没有任何大的垂直间隙

例如：

我正在使用Bootstrap的响应列类（

col lg

，

col md

，

col sm

）和

img responsive

）。我遇到的主要问题是垂直间隙过大

这是我的一本书

---

有什么CSS技巧可以实现类似上面我的图片的布局吗？（仅在较小的显示器上显示较少的列）。

实现此布局的最佳方法是使用

逐步：

首先添加以下内容：

<script src="/path/to/masonry.pkgd.min.js">`</script>

如果您使用的是jQuery库，则可以将其用作插件并按如下方式初始化：

$('.grid').masonry({
  // options
  itemSelector: '.grid-item',
  columnWidth: 200
});

var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, {
  // options
  itemSelector: '.grid-item',
  columnWidth: 200
});    
// element argument can be a selector string
//   for an individual element
var msnry = new Masonry( '.grid', {
  // options
}); 

否则，您可以使用vanilla JS进行如下初始化：

$('.grid').masonry({
  // options
  itemSelector: '.grid-item',
  columnWidth: 200
});

var elem = document.querySelector('.grid');
var msnry = new Masonry( elem, {
  // options
  itemSelector: '.grid-item',
  columnWidth: 200
});    
// element argument can be a selector string
//   for an individual element
var msnry = new Masonry( '.grid', {
  // options
}); 

PS-您也可以在不使用任何JS的情况下在HTML中初始化

有关更多说明，请参阅开始

---

---

仅使用CSS，您可以使用CSS列或CSS Flexbox。但是它会失去与Mashise插件的跨浏览器兼容性

你可以用谷歌搜索“瀑布js”，然后你就可以得到你想要的东西了谢谢-这看起来像是我想要的东西-尽管clearfix似乎不适合我的实现。。。也不在例子上（除非我做错了）。砌体不使用

clearfix

，如果这有助于您的问题，请确保您将答案标记为接受。我需要能够将图像完全封装在父div中，即clearfix。此答案不提供要求的CSS解决方案，它也没有详细说明为什么仅仅使用CSS是不可能的——它只是将一个框架推到了读者面前，并对“最佳”解决方案提出了质疑。我不敢相信我会把这个链接到一个拥有23k+声誉的人身上，但我不是在争论，而是在否决票上给出反馈，我觉得这是合理的，因为你假设使用JS库是可以接受的，尽管问题表明他们正在寻找CSS解决方案。这可能不是一个链接唯一的答案，但就理解技术方面而言，它没有帮助。您描述了如何实现砖石结构，但没有说明为什么仅CSS的解决方案不可行，也没有说明使用其他库的任何理由。