Question

是的，我的头衔很糟糕：p

所以我有一个容器，其中包含<div>个。点在此容器中的是<span>，用于标记标签。这些<span>具有position:absolute，以使它们不会干扰<div>的布局。

#container {
    border:1px solid red;
    width:270px;
}
#container>div {
    display:inline-block;
    width:80px;
    height:80px;
    border:1px solid blue;
    margin:4px;
}
#container>span {
    position:absolute;
    background:#ccf;
}

<!-- Please forgive the lack of spaces - this DOM is dynamically generated -->
<div id="container"><span>Marker</span><div></div><div></div><span>Marker</span><div></div><span>Marker</span><div></div><div></div></div>

在Internet Explorer中，这很好用在Chrome中，它没有。标签开箱即用。

我理解为什么会发生这种情况 - 这是因为<span>在文档流程中的宽度和高度为零，允许它挤入零剩余空间。

但我想知道是否还有其他办法可以达到我想要的效果吗？

编辑：Desired effect，Chrome's bad effect

Answer 1

真的没有得到你想要的地方，这样的事情？将显示块添加到范围。

#container {
    border:1px solid red;
    width:270px;
}
#container>div {
    display:inline-block;
    width:80px;
    height:80px;
    border:1px solid blue;
    margin:4px;
}
#container>span {
  display:block;
    position:absolute;
    background:#ccf;
}

<!-- Please forgive the lack of spaces - this DOM is dynamically generated -->
<div id="container"><span>Marker</span><div></div><div></div><div></div><span>Marker</span><div></div><div></div></div>

强文

Answer 2

借用@Billy的想法并在评论的@JacobGray的帮助下，以下解决方案将display:block应用于<span>，但前提是紧跟第N <div>个N列数。

它有效，但我不满意它依赖于恒定数量的列 - 对于响应式设计来说并不是很好;）当然，更好的解决方案是受欢迎的。

#container {
    border:1px solid red;
    width:270px;
}
#container>div {
    display:inline-block;
    width:80px;
    height:80px;
    border:1px solid blue;
    margin:4px;
}
#container>span {
    position:absolute;
    background:#ccf;
}
#container>div:nth-of-type(3n)+span {
    display:block;
}

<!-- Please forgive the lack of spaces - this DOM is dynamically generated -->
<div id="container"><span>Marker</span><div></div><div></div><span>Marker</span><div></div><span>Marker</span><div></div><div></div></div>

Answer 3

添加显示：阻止跨度是我建议的，或者在你要标记的每个div中放置一个标记范围。

Answer 4

如果我理解得很好，试试这个。将标记<span>放入您希望拥有“标签”的每个<div>中。将position:relative添加到所有<div>，并为top设置属性left和span。

聚苯乙烯。我在下面修改了你的代码，但你应该使用类

#container {
  border:1px solid red;
  width:270px;
}

#container>div {
  display:inline-block;
  width:80px;
  height:80px;
  border:1px solid blue;
  margin:4px;
  position: relative;/* added */
}

#container>div>span {/* modified */
  position:absolute;
  background:#ccf;
  top:-5px;/* added */
  left:-5px;/* added */
}

<div id="container"><div><span>Marker</span></div><div></div><div><span>Marker</span></div><div><span>Marker</span></div><div></div></div>

标签从包装盒中掉出来

4 个答案: