如何对齐此特定的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>