html - CSS - 如何通过 float 摆脱空白的垂直空间

<分区>

当您使用 float 时，下一个 float 元素将至少占据相同数量的垂直空间或更多，然后再打破线条并在流中向下移动。下图中有很多未使用的空白空间。

with empty vertical space

我怎样才能得到更多这样的东西？

without empty vertical space

这是一个 fiddle 。 http://jsfiddle.net/BamBamm/4x51qLt4/1/

<div class="someBlock">...</div>
<div class="someBlock">...</div>
<div class="someBlock">...</div>
<div class="someBlock">...</div>

.someBlock {
    display: inline-block;
    vertical-align:top;
    width: 30%;
    float: left;
}

((从这里复制的图片:http://designshack.net/articles/css/everything-you-never-knew-about-css-floats/))

最佳答案

有一个填充空间的技巧，添加这个:

.someBlock{
    margin-bottom: -100%;
    padding-bottom: 100%;
    overflow: hidden;
}

查看:JSFiddle

不过正如 Hachem Qolami 在评论中指出的那样，我建议使用 jQuery Masonry 之类的东西。

关于html - CSS - 如何通过 float 摆脱空白的垂直空间，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26617552/

上一篇：javascript - Phonegap 警报对话框在消息顶部显示 index.html

下一篇：javascript - 悬停时更改表格行颜色(jQuery 或 CSS)

相关文章：

html - 对齐图像下方的文本

javascript - 固定在页面顶部的 float 导航栏

css - 溢出:以可变的 100% 宽度隐藏

php - Switch/Case 生成 URL 导致空格

html - 如何在div中像网格一样显示图像

html - Css布局重叠

r - 避免代码块破坏 Knitr？ (最好使用 block 选项)

HTML CSS 导航菜单定位文本和图像

html - 带 "dot dot dot"动画的居中可变宽度文本

javascript - 从主机播放视频，因此在重新加载时它不会从头开始