每个项目中具有不同高度的 Bootstrap 3 网格 - 是否可以仅使用 CSS 来解决? [英] Bootstrap 3 grid with different height in each item - is it solvable using only CSS?

问题描述

我正在尝试制作一个缩略图网格，其中每个缩略图都有一个图像和一个标签.如果所有标签的长度相同，它就可以正常工作，因为所有缩略图都具有相同的高度:

I'm trying to make a grid of thumbnails, where each thumbnail has an image and a label. It works fine if all the labels have the same length, because then all the thumbnails have the same height:

http://www.bootply.com/iSqwWyx5ms

但是，如果我缩短最右边缩略图的文本，下面一行的一部分将被推入新行，如下所示:

However, if I shorten the rightmost thumbnail's text, part of the row below gets pushed into a new row, as shown here:

http://www.bootply.com/Wqd021aaeM

我想要的是从第一行结束的最低点开始的第二行.

What I would like is the second row to start from the lowest point in which the first row ended.

我知道我可以用 JavaScript 解决它 - 找到每一行中最长的缩略图并将其他缩略图设置为具有该高度.问题是，我有没有办法做到这一点，或者其他可以解决我的问题的方法，只使用 CSS?

I know I can solve it with JavaScript - find the longest thumbnail in each row and set the other thumbnails to have that height. Question is, do I have any way of doing it, or something else that can solve my problem, using only with CSS?

更新:我事先不知道我在一行中有多少项目.例如，在小屏幕上，我会连续显示 2 个项目，而在更大的屏幕上，它将是 3 个，因此在新行开始时设置的解决方案对我不利.

Update: I don't know beforehand how many items I have in one row. For example, on a small screen I'd have 2 items in a row, while on a bigger screen it'll be 3, so solutions which set when a new row starts aren't good for me.

推荐答案

您应该使用 .clearfix，如 Bootstrap 文档的 Grid 响应式重置部分所述:https://getbootstrap.com/docs/3.3/css/#grid-responsive-resets

You should use .clearfix, as described at the Grid responsive resets section of the Bootstrap documentation: https://getbootstrap.com/docs/3.3/css/#grid-responsive-resets

这篇关于每个项目中具有不同高度的 Bootstrap 3 网格 - 是否可以仅使用 CSS 来解决?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！