CSS - 快速定位问题

Question

有谁知道我如何将“videoid”和“timestamp”项目放在一起？我让他们都绝对定位，以便他们到他们的容器的右下方，但我希望他们彼此相邻（视频首先，然后是时间戳）而不是彼此叠加。我附上了我的heirarchy和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;
}

以下是网站上发生的情况：

有人可以帮帮我吗？我想我需要将两者组合在一起，但我不知道如何从那里接近它。 谢谢， 马特

Answer 1

稍微更改您的HTML：

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

我不完全确定POST TITLE应该去哪里。

删除position: absolute和.timestamp上的.videoid，而不是：

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

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