встроенный элемент блока, который фактически появляется под другим элементом

Question

У меня есть маленький div, появляющийся рядом с другим div переменной высоты - и я заметил, что если div переменной высоты не является одним изображением или содержит более одной строки текста, меньший div появляется под большим. это буквально преследует меня, как через неделю, my css is

0: пожалуйста помоги!

(я кодирую это для tumblr, у которого есть собственная система тегов, поэтому содержимое div имеет переменную высоту и медиаконтент, но jsfiddle ниже содержит некоторый текст для демонстрации ошибки. Также я понимаю, что есть много дивы, но это потому, что на странице Постоянная ссылка на изменения CSS для каждого элемента)

#postcontainer { 
 
    display: block; 
 
    position: absolute; 
 
    width: 600px; 
 
    border: 1p/x solid #eeeeee; 
 
    margin-left: 20%; 
 
    margin-top: 5%; 
 
} 
 
.nonphoto { 
 
    width: 450px display: inline-block; 
 
    margin-bottom: 50px; 
 
} 
 
.postinfo { 
 
    border: 1px solid #eeeeee; 
 
    width: 10px; 
 
    height: 10px; 
 
    padding: 2px; 
 
    background-color: #eeeeee; 
 
    position: absolute; 
 
    display: inline-block; 
 
    margin-left: 15px; 
 
    transition: 0.5s; 
 
} 
 
.postinfo div { 
 
    opacity: 0; 
 
    font-size: 10px; 
 
    transition-duration: 0.2s; 
 
} 
 
.postinfo:hover { 
 
    width: 35px; 
 
    height: 55px; 
 
    padding: 5px; 
 
    transition: 0.5s; 
 
} 
 
.postinfo:hover div { 
 
    opacity: 1; 
 
    transition-duration: 0.5s; 
 
    transition-delay: 0.5s; 
 
}

<div id="postcontainer"> 
 
    <div class="nonphoto"> 
 
    <p>text text text</p> 
 
    <p>text text</p> 
 
    <p>text text text text text</p> 
 
    <div class="postinfo"> 
 
     <div> 
 
     date source via 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

https://jsfiddle.net/g0rsL2ev/

Answer 1

Существовали несколько й неправильно. Вам не хватало; после ширины 450px на классе nonphoto. Кроме того, с классом postinfo ... абсолютная позиция и встроенный блок не работают хорошо вместе (см. Ответ здесь CSS: display:inline-block and positioning:absolute). Затем вы должны добавить vertical-align: top для nonphoto и postinfo. Теперь вы можете все еще нужно настроить отступы по своему вкусу, а также: https://jsfiddle.net/jcchs9ov/1/

#postcontainer { 
     display:block; 
     position:absolute; 
     width:600px; 
     border:1px solid #eeeeee; 
     margin-left:20%; 
     margin-top:5%; 
    } 
    .nonphoto { 
     width:450px; 
     display:inline-block; 
     margin-bottom:50px; 
     vertical-align: top; 
    } 
    .postinfo { 
     border:1px solid #eeeeee; 
     width:10px; 
     height:10px; 
     padding:2px; 
     background-color:#eeeeee; 
     display:inline-block; 
     margin-left:15px; 
     transition:0.5s; 
     vertical-align: top; 
    } 
    .postinfo div { 
     opacity:0; 
     font-size:10px; 
     transition-duration:0.2s; 
    } 
    .postinfo:hover { 
     width:35px; 
     height:55px; 
     padding:5px; 
     transition:0.5s; 
    } 
    .postinfo:hover div { 
     opacity:1; 
     transition-duration:0.5s; 
     transition-delay:0.5s; 
    }