Question

我有一个缩略图库，我试图使用display布局：inline-block而不是float，以便我可以使用：after伪来包含一个通过attr（）的标题。布局有效但是：在“对象”重叠项目“下方”之后。

这是我的HTML：

<div id="bg">
    <div class="thumbs">
        <a href="img.png" style="background-image:url('img.png')" title="This is the outside of the house." /></a>
        <a href="img.png" style="background-image:url('img.png')" title="This is another example of a description. This is another example of a description. This is another example of a description. This is another example of a description." /></a>
        <a href="img.png" style="background-image:url('img.png')" title="Here is yet another description." /></a>
        <a href="img.png" style="background-image:url('img.png')" title="Image 001" /></a>
        <a href="img.png" style="background-image:url('img.png')" title="Image 001" /></a>
        <a href="img.png" style="background-image:url('img.png')" title="Image 001" /></a>
        <a href="img.png" style="background-image:url('img.png')" title="Image 001" /></a>
        <a href="img.png" style="background-image:url('img.png')" title="Image 001" /></a>
        <a href="img.png" style="background-image:url('img.png')" title="Image 001" /></a>
        <a href="img.png" style="background-image:url('img.png')" title="Image 001" /></a>
        <a href="img.png" style="background-image:url('img.png')" title="Image 001" /></a>
        <a href="img.png" style="background-image:url('img.png')" title="Image 001" /></a>
        <a href="img.png" style="background-image:url('img.png')" title="Image 001" /></a>
        <a href="img.png" style="background-image:url('img.png')" title="Image 001" /></a>
        <a href="img.png" style="background-image:url('img.png')" title="Image 001" /></a>
    </div>

这是我的CSS：

.thumbs a{
width:120px;
height:120px;
display:inline-block;
border:7px solid #303030;
box-shadow:0 1px 3px rgba(0,0,0,0.5);
border-radius:4px;
margin: 6px 6px 40px;
position:relative;
text-decoration:none;

background-position:center center;
background-repeat: no-repeat;

background-size:cover;
-moz-background-size:cover;
-webkit-background-size:cover;

vertical-align:top;
}

.thumbs a:after{
background-color: #303030;
border-radius: 7px;
bottom: -136px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
color: #FFFFFF;
content: attr(title);
display: inline-block;
font-size: 10px;
max-width: 90px;
overflow: auto;
padding: 2px 10px;
position: relative;
text-align: center;
white-space: no-wrap;
}

这是一个示例：http://jsfiddle.net/befxe/9/

如您所见，第二个描述与其下方的缩略图重叠。是否可以根据内容的大小自动“推”第二行（向屏幕底部）？我已尝试将“.thumbs a”和“.thumbs a：after”设置为各种显示类型（内联块，块等）并更改定位无效。我还尝试将整个“a”包装在div中并更改div的显示类型，但这也不起作用。

伪元素如：before和：after似乎是一种很好的方式来处理像这样的次要内容，但是它们在布局方面的功能真的让我感到困惑，因为它们似乎不像其他DOM对象一样“工作” 。（并且有充分的理由，我想，因为它们不是真正的DOM对象。：P）

有什么建议吗？

Answer 1

如上所述：

它与伪元素无关。你已经玩弄了它的定位，任何其他元素都会对你所提供的风格做同样的事情。除非你的图像纯粹是装饰性的（事实上它们的标题/描述明显暗示它们不是装饰性的），你应该使用图像元素而不是背景属性。

如何防止CSS：伪元素重叠其他内容后？

1 个答案: