Div响应网格式布局，没有垂直间隙

Question

我收集了div个（卡片）。每个都有标题，描述和图像（所有长度/大小各不相同）。

我想显示这些＆＃34;很好地＆＃34;在屏幕上。

很好地＆＃34;＆＃34;我的意思是我希望图像是缩略图 - 在标题和描述之后水平居中。

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

示例：

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

这是我的attempt。

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

Answer 1

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

STEP by STEP：

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插件的交叉浏览器兼容性