CSS - вопрос быстрого позиционирования - PullRequest
Новая
       8

CSS - вопрос быстрого позиционирования

0 голосов
/ 07 сентября 2011

Кто-нибудь знает, как я смогу расположить элементы "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;
}

Вот что происходит на сайте: enter image description here

Может кто-нибудь помочь мне? Я думаю, что мне нужно сгруппировать их вместе, но я не знаю, как к этому подойти. Спасибо, Matt

1 Ответ

0 голосов
/ 07 сентября 2011

Измените ваш 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.

...