本文介绍了使用 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 的网格:框不会显示在彼此的正下方的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!