CSS - 快速定位问题

Question

有谁知道我如何才能将元素“videoid”和“timestamp”放在一起？我让它们都绝对定位，以便它们位于容器的右下角，但我希望它们彼此相邻显示(首先是视频，然后是时间戳)而不是彼此重叠。我附上了我的层次结构和 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 应该去哪里。

删除 .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 。