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

问题描述

我有一组 divs(卡片).每一个都有标题、描述和图片(长度/大小各不相同).

我想在屏幕上很好地"显示这些.

很好"我的意思是我希望图像是缩略图 - 在标题和描述之后水平居中.

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

示例:

我正在使用 Bootstrap 的响应式列类(col-lg、col-md、col-sm)和 img- 响应式.我遇到的主要问题是较大的垂直间隙.

这是我的尝试.

是否有任何 CSS 技巧可以实现与上图类似的布局?(仅在较小的显示器上使用较少的列).

解决方案

实现这种布局的最佳方式是使用 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><!-- 或--><script src="https://npmcdn.com/masonry-layout@4.0/dist/masonry.pkgd.min.js"></script>

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

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

3. 还有这个 CSS

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

4. 如果您使用的是 jQuery 库，您可以将其用作插件并像这样初始化它:

   $('.grid').masonry({//选项itemSelector: '.grid-item',列宽:200});

5. 否则你可以像这样用 vanilla JS 初始化:

   var elem = document.querySelector('.grid');var msnry = new Masonry( elem, {//选项itemSelector: '.grid-item',列宽:200});//元素参数可以是选择器字符串//对于单个元素var msnry = new Masonry('.grid', {//选项});

PS- 你也可以在没有任何 JS 的情况下在 HTML 中初始化.

有关详细说明，请参阅此处

<小时>

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

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.

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

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

Example:

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.

Here's an attempt of mine.

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

STEP by STEP:

1. you start by adding this:

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

   or using 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. 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>
   

3. And this CSS

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

4. 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
   });
   

5. 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- You can also initialize in HTML without any JS.

For further instructions, see Get Started here

---

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

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