1

固定/已解决

感谢@Steve，这是解决方案：

我相信这是由于各个盒子之间的高度略有不同。由于它们都是浮动的，所以稍微高一点的第一个框会使第二行中的第一个框在第一个框占用的额外空间之后开始。

确保它们都被迫具有完全相同的高度。

问题

我不知道为什么会这样 - 我正在开发的网站突然开始出现这些奇怪的空间？（红框已添加到 s

知道为什么会发生这种情况或如何解决吗？不只是在这个地方，我正在构建另一个随机添加空白区域的页面？

如果我更改max-width图像上的属性，每隔一个像素就会将不合适的像素放回原位？

我正在查看

铬/火狐/Safari：Mozilla/5.0 (Macintosh; Intel Mac OS X 10_8_3) AppleWebKit/537.31 (KHTML, like Gecko) Chrome/26.0.1410.43 Safari/537.31

奇怪的事情

HTML

<div class="container">
<div class="span12" style="margin-top: -15px; margin-bottom: 10px;">
    <div class="span10" style="margin: 0px auto; float: none;">
        <a href="/news-and-media"><img src="" alt="Magazines and blogs" class="span3 front-page-tile pull-left"></a>
        <a href="/how-to-use"><img src="" alt="How to use" class="span3 front-page-tile pull-left"></a>
        <a href="/store"><img src="" alt="Products" class="span3 front-page-tile pull-left"></a>
        <a href="/endorsements"><img src="" alt="Endorsements" class="span3 front-page-tile pull-left"></a>
        <a href="/before-after"><img src="" alt="Before and After" class="span3 front-page-tile pull-left"></a>
        <a href="/doctor-recommended"><img src="" alt="Doctor Recomended" class="span3 front-page-tile pull-left"></a>
        <div class="clearfix"></div>
    </div>
</div>
<div class="clearfix"></div>
</div>
4

3 回答 3

2

我相信这是由于各个盒子之间的高度略有不同。由于它们都是浮动的，所以稍微高一点的第一个框会使第二行中的第一个框在第一个框占用的额外空间之后开始。

确保它们都被迫具有完全相同的高度。

于 2013-04-04T19:51:58.807 回答
1

尝试将此样式添加到您的样式表中。

.span10 a{vertical-align: top;}

或者如果你想继续使用 inline-stlyes，添加 style="vertical-align: top;" 到你的每一个锚。

于 2013-04-04T19:53:05.553 回答
0

这只是一个猜测，因为我目前看不到您的 CSS，但您是否尝试过使用display:inline-block;( zoom:1;*display:inline;-修复旧版本的 IE) 作为您的链接？

于 2013-04-04T19:54:56.443 回答