响应式网格样式布局中的 div，没有垂直间隙

Question

我收藏了divs（卡片）。每一个都有一个标题、描述和图片（所有的长度/大小都不同）。

我想在屏幕上“很好地”显示这些。

“很好”是指我希望图像是缩略图 - 在标题和描述之后水平居中。

更重要的是，我希望卡片（包含div）一个接一个地放置（水平然后垂直）并且没有任何大的垂直间隙。

例子：

我正在使用 Bootstrap 的响应式列类（col-lg、col-md、col-sm）和img-responsive。我遇到的主要问题是垂直间隙很大。

这是我的attempt。

任何 CSS 技巧来实现类似于我上面图片的布局？ （仅在较小的显示器上使用较少的列）。

Answer 1

实现这种布局的最佳方式是使用Masonry

一步一步：

1. 你首先添加这个：

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

   或使用CDN

   <script src="https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.js"></script>
   <!-- or -->
   <script src="https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.min.js"></script>
   

2. 那么这就是你的 HTML 标记

   <div class="grid">
     <div class="grid-item">...</div>
     <div class="grid-item grid-item--width2">...</div>
     <div class="grid-item">...</div>
     ...
   </div>
   

3. 还有这个 CSS

   .grid-item { width: 200px; }
   .grid-item--width2 { width: 400px; }
   

4. 如果你使用的是 jQuery 库，你可以将它作为一个插件使用并像这样初始化它：

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

5. 否则你可以像这样使用 vanilla JS 进行初始化：

   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 初始化。

有关详细说明，请参阅入门here

---

仅使用 CSS，您可以使用 CSS Columns 或 CSS Flexbox。但它会失去对 Masonry 插件的跨浏览器兼容性