我有一个缩略图画廊,我想使用display:inline-block而不是float来布局,以便我可以使用: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;
}
这里有一个演示例子的fiddle:http://jsfiddle.net/befxe/9/。如您所见,第二个描述文字重叠在它下方的缩略图上面了。是否有可能根据:after内容的大小自动将第二行向下(朝屏幕底部)"推"?我尝试将".thumbs a"和".thumbs a:after"都设置为各种显示类型(inline-block、block等),并更改它们的定位方式,但都没有成功。我还尝试将整个"a"包装在一个div中,并更改该div的显示类型,但也没用。
像:before和:after这样的伪元素似乎是处理此类小型内容添加的好方法,但就布局而言,它们的功能确实让我感到困惑,因为它们似乎不像其他DOM对象那样“有效”。 (我想这是有充分的理由的,因为它们实际上并不是DOM对象。:P)
有什么建议吗?
:after
选择器本质上把内容视为原始项目的子级。它仅将内容可见地放置在原始项目内的其他行内内容(通常是文本)之后(示例)。这就是为什么您不得不定位它,以便首先出现在原始项目之外。 - Ruben Infante