【问题标题】:Eliminating vertical/horizontal gaps in a seamless grid of images消除图像无缝网格中的垂直/水平间隙
【发布时间】:2012-04-04 05:04:04
【问题描述】:

我在创建无缝照片网格时遇到了一些问题。我在互联网上搜索了很长时间,但找不到任何解决方案。

我有一个图像网格,它们都是正方形且大小相同。我通过添加img { vertical-align: middle; }

消除了每一行出现的空白

现在我需要消除每列中出现的垂直空白。

Here is the site I am working on

Here is a screenshot of the site I am working on

您可以看到图像的左右两侧大约有 2-3px 的空白区域。我已经尝试了 margin:0padding:0 几乎所有我能想到的。

我使用display:inline-block 设置了网格。我需要保留这个。我不想使用花车。

我的 HTML 非常简单:

<ul><li><a href="#"><img src="0.jpg" /></a></li></ul>

【问题讨论】:

    标签: css grid whitespace vertical-alignment alignment


    【解决方案1】:

    这样做可以消除每列中出现的垂直空白:

    #photos li img { width: 102% }
    

    例如:

    【讨论】:

      【解决方案2】:

      删除宽度 columns.css 第 101 行

      【讨论】:

        【解决方案3】:

        为什么不想使用浮点数?这是我的建议:

        ul { overflow: auto; width: XXXpx; }
        
        li {
          float: left;
          width: XXXpx;
          margin: 0px;
          padding: 0px;
          outline: 0px;
        }
        
        
        
        <ul>
          <li><a href="#"><img src="img1.jpg" alt=""></a></li>
          <li><a href="#"><img src="img2.jpg" alt=""></a></li>
          <li><a href="#"><img src="img3.jpg" alt=""></a></li>
        </ul>
        

        【讨论】:

          【解决方案4】:

          非常感谢我在 stackoverflow 上看到的最快响应。

          我犯了一个愚蠢的错误。因为我使用的是inline-block,所以我忘记了它在 HTML 中占了空白。我删除了所有的空白,现在它似乎工作了。

          @MartinCortez 的答案似乎也有效,如果我不想用空格来愚弄的话。

          【讨论】:

            【解决方案5】:

            我知道现在这有点晚了,但我想我会分享我会做的事情,因为其他人可能会觉得它有用。

            正如@davecave 所说,这是一个空格问题,但删除 HTML 中的空格并不总是理想的。

            在我通常做的包含元素上:

            #container {
                letter-spacing: -4px;
                word-spacing: -4px; 
            }
            

            并且在 inline-block 的项目上重置值:

            .item {
                letter-spacing:0;
                word-spacing:0;
            }
            

            【讨论】: