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

2022-01-18 00:00:00 grid html css twitter-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..

相关文章