有谁知道我如何将“ 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;
}


这是网站上正在发生的事情:


有人可以帮我吗?我认为我需要将两者组合在一起,但是我不知道如何从那里开始。
谢谢,
马特

最佳答案

稍微更改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

10-05 21:01
查看更多