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 - 快速定位问题

回答

相关问题