Html 避免网站垂直块中的空白

我试图理解如何改变网站上的一件小事，但我不知道如何去做。 我有两个列中组织的文章网格，我希望各个块被分开，避免了空白，如图所示。

---

但我不知道应该设置哪种属性。

尝试将每篇文章的高度设置为“自动”，并在底部留出适当的边距。您仍然可以在下面获得一些空间，其中两篇文章的高度小于另一列中相应的文章

---

查看上的项目列-这说明了效果。

仅从一张图像就很难说。如果页边距在html元素中，可以尝试将页边距和填充设置为0px；如果位图中有空格，请裁剪它们。

编辑-澄清答案（在注释中澄清问题）

父主题中有一条规则：

#content .post { margin-bottom: 12px; }

您需要在子主题和集合中重写此规则

#content > div.articolo .post { margin-bottom:0; }

原始答案

首先，我强烈建议您不要在一个可以用简单CSS修复的项目中扔掉一个沉重的jQuery库（即砖石）

其次，从你评论中的代码来看，这是：

#content div.articolo { display:inline-block; clear:none; min-height: 10px; } 
#content > div.articolo:nth-child(even) { width:48%; float:left; clear:both; } 
#content > div.articolo:nth-child(odd) { width:48%; float:right; } 
#content > div.articolo:first-child { width:100%; float:none; clear:both; }

您应该将其更改为：

#content div.articolo { display:block; clear:none; min-height: 10px; } 
#content > div.articolo:nth-child(even) { width:50%; float:left; clear:both; } 
#content > div.articolo:nth-child(odd) { width:50%; float:right; } 
#content > div.articolo:first-child { width:100%; float:none; clear:both; }

请注意，我唯一更改的是

宽度（更改为50%），我将
显示：内联块
更改为
显示：块

display:inline block
在标记中保留空格（将多个空格转换为一个空格），因此，如果在关闭div之后的标记中有一个空格，即
display:inline block
，您将在浏览器中看到一个空格。很有可能，这就是为什么开发人员将宽度设置为
48%
，以（糟糕地）解释在每个文章块之后出现一个空格的事实（因为它是
display:inline block
），这意味着每个块不能设置为50%宽度，因为这样它们就不会彼此相邻（因为50%+50%+a空间>100%）你能把你的代码放在JSFIDLE上吗？这是巨大的。不是你的错，只是一个重复的问题，没有简单的答案。考虑使用JavaScript，看看Hi安德列，砖石结构肯定超过了我的能力……无论如何，谢谢！嗨，孝义，这是子主题中的代码：/*Calunne主页*/*内容目录。o{display:inline block；clear:none；最小高度：10px；}content>div.articolo:nth child（偶数）{width:48%；float:left；clear:both；}content>div.articolo:nth child（奇数）{width:48%；float:right；}content>div.articolo:first child{width:100%；float:none；clear:both；}（colonne=列，articolon=文章）嗨，帕特，我想相关的代码是这样的：/*colonne主页*/#content div.articolo{display:inline block；clear:none；最小高度：10px；}content>div.articolo:nth child（偶数）{width:48%；float:left；clear:tware；}#content>div.articolo:nth child（奇数）{width:48%；float:right；}{宽度：100%；浮点：无；清除：两者；}我是否应该将最小高度：10px；更改为高度：自动；？对不起，亚当，我没有解释清楚：我不想避免列之间的间距，而是避免文章之间的垂直间距。@ale-您有代码没有显示。使用您显示的代码，我创建了一个小提琴，您可以看到，它没有任何垂直间距-请发布指向您站点的链接（首选）或者所有相关的代码——也就是我们可以看到问题被复制的东西。不，它只是减少了帖子之间的距离，但是它并没有避开空白空间。什么空白空间？你能在你的图片中突出它们吗？我的坏，你的意思是当你在一篇短篇文章旁边有一篇长文章时会发生什么？你必须使用<代码> m。asonry