CSS - 快速定位問題

有誰知道我怎樣才能將物品「videoid」和「時間戳」放在一起？我把它們放在絕對位置，以便它們到達它們容器的右下角，但我希望它們彼此相鄰顯示（視頻第一，然後是時間戳），而不是彼此重疊。我附上了關於我的heirarchy和CSS的基本概念以及發生了什麼的圖像。CSS - 快速定位問題

<div id="featured_articles"> 
    <ul> 
     <li> 
     <a href="LINK"> 
      POST FEATURED IMAGE 
     </a> 
     <a href="LINK"> 
     <label> 
      POST TITLE 
      <div class="timestamp"> 
       Posted 'X' Days Ago 
       <div class="videoid" 
        VIDEO 
       </div> 
      </div> 
     </label> 
     </a> 
     </li> 
    </ul> 
</div>

而CSS：

#featured_articles label .timestamp { 
position: absolute; 
top: -20px; 
right:0px; 
background:rgba(0, 189, 246, 0.5); 
color: #000; 
font-size: 10px; 
line-height: 20px; 
padding: 0 10px; 
text-transform: uppercase;

}

#featured_articles label .videoid { 
    position:absolute; 
    bottom:0px; 
    right:0px; 
    background:rgba(148, 0, 246, 0.5); 
    color:#fff; 
    font-size:10px; 
    line-height: 20px; 
    padding:0 10px; 
    text-transform:uppercase; 
}

這裏發生了什麼網站上： enter image description here

是否有人可以幫助我嗎？我想我需要將兩者結合在一起，但我不知道如何從那裏接近它。謝謝，馬特

來源

2011-09-07 Matt

稍微改變你的HTML：

POST TITLE 
<label> 
    <div class="timestamp"> 
     Posted 'X' Days Ago 
    </div> 
    <div class="videoid"> 
     VIDEO 
    </div> 
</label>

我不完全知道從哪裏POST TITLE應該去。

上.timestamp和.videoid，而是刪除position: absolute：

#featured_articles label { 
    position:absolute; 
    bottom:0px; 
    right:0px; 
}

最後，添加float: left到#featured_articles label .timestamp，並overflow: hidden到#featured_articles label .videoid。

來源

2011-09-07 11:01:43 thirtydot

CSS - 快速定位問題

回答

相關問題