Question

我创建了一个包含标签的div，标签的跨度为“display：inline-block，float：left”。标签在我的项目中无处不在，除非我使用php编写div“tag_block”并将标签跨越内部，奇怪的是，对于第一个渲染的元素，跨度居中，然后当我向下滚动时其他元素，定位缓慢向右移动，在右侧停止，偶尔跳跃一点。

这听起来像浏览器问题吗？我很难过！

“float：left”似乎被标记块打印出来的每个元素的任意变化所取代。

<div class="tag_block">
    <span class="tag">Tag0</span>
    <span class="tag">Tag1</span>
</div>

这是我的JSFiddle，代码中有注释（http://jsfiddle.net/livvyjeffs/4uAp4/5/）

所以我确实最小化了问题，并且出于某种原因，顶部块内的文本会影响跨度开始在其下方的块中显示的位置。有什么想法吗？

Answer 1

由于您使用的是display: inline-block，因此您不必浮动。 Float适用于块级元素。这可能是您的问题的原因。 display: inline-block在技术上与float: left完全相同，因为它将元素内联在一起。

另一个问题可能是您的花车堆放在tag_block div内部。如果将所有元素浮动到div中，它将不会自行清除。如果是这种情况，你可以让下一组元素与前者相提并论。您可以使用clearfix来解决此问题。将该代码添加到CSS并将clearfix类添加到父元素tag_block。再次，你应该能够通过简单地删除浮动来避免这种情况。

Answer 2

哇......问题是容器上方的一个div有问题扩展到了盒子的边界之外，导致它下面的div（问题div）的对齐依赖于在它之上。

以下是problem highlited。

solution，将问题div设置为高度：0（或不与边界重叠的东西）。

.poster{
     height: 0;
}

Stack Etiquette？我试图删除帖子而不是回答我自己的问题。好像我的问题暂时停留在这里。感谢您的帮助！

作为内联块的跨度依赖于看似无关的代码

2 个答案: