划分为响应式网格样式布局，没有垂直间隙 [英] Divs in a responsive grid-style layout with no vertical gap

问题描述

我有一个 div s（卡）的集合。

I have a collection of divs (cards). Each one will have a title, description, and image (all of varying lengths / sizes).

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

I want to display these "nicely" on screen.

nicely我的意思是我想要的图片是一个缩略图 - 水平居中在标题和描述之后。

By "nicely" I mean I want the image to be a thumbnail - horizontally centered after the title and description.

更多重要的是，我想要的卡（包含 div ）一个接一个（水平然后垂直），没有任何大的垂直缺口。

More importantly I want the card (containing div) to be positioned one after the other (horizontally then vertically) and without any large vertical gaps.

示例：

我使用引导响应列类（ col-lg ， col-md ， sm ）和 img-responsive 。我碰到的主要问题是大的垂直缺口。

I'm using Bootstrap's responsive column classes (col-lg, col-md, col-sm) and img-responsive. The main problem I'm hitting is the large vertical gaps.

这是一个尝试。

任何CSS技巧来实现与上图类似的布局？

Any CSS tricks to achieve a layout similar to my image above? (Only with fewer columns on smaller displays).

推荐答案

实现此布局的最佳方式是使用砌体

The best way to achieve this layout is using Masonry

逐步：

1. 您首先要添加：

1. you start by adding this:

<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>

那么这将是您的HTML标记

then this would be your HTML markup

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

和这个CSS

And this CSS

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

如果您使用jQuery库，可以将其用作插件并初始化像这样：

If you are using jQuery library , you can use it as a plugin and initialize it like this:

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

否则可以使用vanilla JS初始化：

otherwise you can initialize with vanilla JS like this:

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-您也可以在HTML中初始化任何JS。

PS- You can also initialize in HTML without any JS.

有关详细说明，请参阅开始 here

For further instructions, see Get Started here

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

Using CSS only, you can either use CSS Columns or CSS Flexbox. but it will lose in cross browser compatibility to the Masonry plugin

这篇关于划分为响应式网格样式布局，没有垂直间隙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！