div Относительная без определенной высоты

Question

Как добавить контент после div div без определенной высоты?

#team-image-contenitor { 
 
    position: relative; 
 
    margin: 0 auto; 
 
} 
 
#team-image-contenitor img { 
 
    position: absolute; 
 
    left: 0; 
 
    -webkit-transition: opacity 1s ease-in-out; 
 
    -moz-transition: opacity 1s ease-in-out; 
 
    -o-transition: opacity 1s ease-in-out; 
 
    transition: opacity 1s ease-in-out; 
 
} 
 
#team-image-contenitor img.top:hover { 
 
    opacity: 0; 
 
}

<div class="fusion-one-third one_third fusion-column staff-details"> 
 
    <div id="team-image-contenitor"> 
 
    <img class="bottom" src="http://lorempixel.com/400/200/sports/1" alt=""> 
 
    <img class="top" src="http://lorempixel.com/400/200/sports/2" alt=""> 
 
    </div> 
 
    <h3> 
 
    title<br> 
 
    title title 
 
    </h3> 
 
    <div class="bio_description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lacinia dui sit amet sem porta pellentesque. Suspendisse vitae vestibulum augue. Pellentesque nec dignissim sem. Donec vitae eleifend leo. Vivamus euismod augue ut maximus consectetur. Lorem 
 
    ipsum dolor sit amet, consectetur adipiscing elit. Donec nec feugiat urna, nec euismod magna. Proin tempor risus in tempor mollis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce lacinia dui sit amet sem porta pellentesque. Suspendisse 
 
    vitae vestibulum augue. Pellentesque nec dignissim sem. Donec vitae eleifend leo. Vivamus euismod augue ut maximus consectetur. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec nec feugiat urna, nec euismod magna. Proin tempor risus 
 
    </div> 
 
</div>

Я хотел бы, что этот текст будет выглядеть после дел.

Answer 1

Когда вы position: absolute;, который принимает ваш элемент из регулярного потока документа, так что никоим образом не для текста, не имеют каких-либо позиционно-отношения с ним

в этом случае, вы можете использовать Jquery, чтобы получить height изображения затем использовать высоту изображения, чтобы стать margin-top содержания, чтобы избежать дублирования. .

Answer 2

Изменить position: absolute для изображений на position: relative. Легко делает это ... Если это не то, что вы имеете в виду, вы должны попытаться объяснить лучше;)

заказ the revised fiddle