如何防止CSS：在重疊其他內容的僞元素之後？

我有一個縮略圖庫，我嘗試使用display：inline-block來代替浮點數，這樣我就可以使用：after僞來通過attr（）包含標題。佈局可以工作，但是：「對象」在「下面」與項目重疊之後。如何防止CSS：在重疊其他內容的僞元素之後？

這裏是我的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的顯示類型，但這也不起作用。

僞元素，如：前和：後似乎像一個偉大的方式來處理未成年人的內容補充這樣的，但是它們在佈局方面的功能確實是困惑我，因爲他們似乎並沒有「工作」像其他DOM對象。（由於充分的理由，我想，因爲它們不是真正的DOM對象。：P）

有什麼建議嗎？

來源

2013-03-06 DRKMTTR

它與僞元素無關。你已經玩弄了它的定位，任何其他元素都會對你提供的樣式做同樣的事情。除非你的圖像是純粹的裝飾（他們有一個標題/描述的事實清楚地表明它們不是裝飾性的），你應該使用圖像元素而不是背景。 – cimmanon 2013-03-06 01:24:17

我相信'：after'選擇器基本上將內容視爲原始項目的子項。它只是簡單地將內容放置在原始項目[（示例）]（http://jsfiddle.net/8X7JE/）中的其他內聯內容（通常是文本）之後。這就是爲什麼你必須定位它，以便它出現在原始項目之外。 – 2013-03-06 01:30:02

正如上面指出：

它無關，與作爲一個僞元素。你已經玩弄了它的定位，任何其他元素都會對你提供的樣式做同樣的事情。除非你的圖像是純裝飾的（他們有一個標題/描述的事實清楚地表明它們不是裝飾性的），你應該使用圖像元素而不是背景屬性。

來源

2014-05-09 18:55:12

如何防止CSS：在重疊其他內容的僞元素之後？

回答

相關問題