4

我有一个缩略图库，我正在尝试使用 display:inline-block 而不是浮动来布局，以便我可以使用:after 伪通过 attr() 包含标题。布局有效，但 :after “对象”与“下方”的项目重叠。

这是我的 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/

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

:before 和 :after 之类的伪元素似乎是处理此类添加少量内容的好方法，但它们在布局方面的功能确实让我感到困惑，因为它们似乎不像其他 DOM 对象那样“工作”。（我想这是有充分理由的，因为它们并不是真正的 DOM 对象。：P）

有什么建议么？

4

1 回答 1

2

如上所述：

它与伪元素无关。您已经玩弄了它的定位，任何其他元素都会对您提供的样式做同样的事情。除非您的图像纯粹是装饰性的（它们具有标题/描述的事实清楚地表明它们不是装饰性的），否则您应该使用图像元素而不是背景属性。

于 2014-05-09T18:55:12.677 回答