避免网站垂直块中的空格

时间:2014-11-26 15:44:44

标签: html css css3

我正在尝试了解如何更改网站中的小东西,但我无法弄清楚如何做到这一点。 我有一个由两列组成的文章网格,我希望将各个块分开,避开空白区域,如图http://i.stack.imgur.com/tNCFd.png 但我不知道应该设置哪种属性。

3 个答案:

答案 0 :(得分:0)

尝试将每个文章的高度设置为' auto'有合适的保证金底部。您仍然会在下面的两个文章高度小于另一列中相应文章的位置获得一些空间。

查看http://www.ebuyer.com/上的项目列 - 这说明了效果。

答案 1 :(得分:0)

很难从一张图片中说出来。如果边距在html元素中,您可以尝试将margin和padding设置为0px;如果空白位于位图中,则裁剪它们。

答案 2 :(得分:0)

编辑 - 澄清答案(评论中澄清的问题)

父主题中有一条规则:

#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; }

请注意,我更改的唯一内容是width(更改为50%),我将display: inline-block更改为display: block

<{{1>}在标记中保留空格(转换多对一),所以如果在display: inline-block的结束div之后标记中有空格,那么你&# 39;在浏览器中看到一个空格。有可能的是,开发人员将宽度设置为display: inline-block,导致(很差)考虑到每个文章块之后出现空格(因为它是48%)这意味着每个块不能设置为50%的宽度,因为它们不会彼此相邻(因为50%+ 50%+空格> 100%)