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