如何對齊此特定的div圖像和內容溢出

Question

圖像和內容如何在此圖片中對齊，然後是內容。

Answer 1

.container { 
 
    width: 50%; 
 
} 
 

 
.imgContainer { 
 
    float: left; 
 
    margin: 1em; 
 
} 
 

 
.imgContainer p { 
 
    margin: 0; 
 
    font-style: italic; 
 
    font-size: 0.8em; 
 
}

<div class="container">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam aliquam nisi vitae ultrices viverra. Donec egestas eu odio vitae vehicula. Donec vitae lacinia leo. Mauris in libero purus. 
 
    <div class="imgContainer"><img src="http://placehold.it/100x50"> 
 
    <p class="imageNote">Note under img</p> 
 
    </div>Cras interdum sapien tortor, non pretium tellus rhoncus quis. Nunc dapibus dignissim dolor ut bibendum. Curabitur in arcu consectetur, dignissim est eu, porta velit. In luctus purus eget elit placerat tempor. Quisque id ante sit amet lacus tincidunt 
 
    lacinia. 
 
</div>