使用 Bootstrap 制作类似 Pinterest 的网格:框不会显示在彼此的正下方

Making a Pinterest-like grid with Bootstrap: the boxes are not displayed right below each other(使用 Bootstrap 制作类似 Pinterest 的网格:框不会显示在彼此的正下方)

问题描述

HTML 方案如下:

<div class="items">
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  ...
</div>

.item CSS 样式:

float: left;

结果:

但是白框并没有一个接一个地对齐——问题可能出在哪里?我也试过用 display: inline-block; 代替 float: left;，但结果基本一样.

But the white boxes are not aligned right one after another one -- where could be the issue? I;ve tried also using display: inline-block; instead of float: left;, but the result was basically the same.

谢谢

推荐答案

你可以像这样使用 CSS 3 column-width 和 column-gap..

You can use CSS 3 column-width and column-gap like this..

这篇关于使用 Bootstrap 制作类似 Pinterest 的网格:框不会显示在彼此的正下方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！