html - 如何在html和css中使用如下图像制作div

Question

我想做。
我有一个 div，里面会有一个带有一些文本的图像，所以我希望图像位于左上角，然后是文本。

<div>
<img src=""/> then text text text text text ....
</div>

如果还有其他方法，请告诉我。

enter image description here

Answer 1

你给图像 float:left;

.pic{
  float:left;
  margin-right:10px;
}

<div>
 <img src="http://lorempixel.com/400/200" class="pic">
 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas eu nunc leo. Nulla tristique consequat lacinia. Etiam viverra dapibus nulla, ac luctus magna lobortis ac. Praesent magna velit, volutpat sed varius sit amet, fermentum vitae odio. Mauris porttitor bibendum arcu, dictum pulvinar diam malesuada eu. Duis non tellus arcu, a consequat lacus. Aliquam suscipit nunc ut sem sollicitudin consectetur a id dolor. Suspendisse pretium dictum luctus. Cras dapibus ullamcorper facilisis. Sed turpis ante, interdum eget lacinia quis, tincidunt ut sapien. Fusce ornare molestie sodales. Cras semper ultrices mattis. Aliquam erat volutpat. Morbi mollis ultricies lobortis.
Phasellus luctus posuere mauris id venenatis. Ut tempus tempor odio, sit amet fermentum enim porttitor vitae. Maecenas sodales sagittis risus vel tincidunt. Duis non sem nisi, sollicitudin commodo mi. Sed tempus egestas metus, eu elementum erat malesuada ac. Ut sed vulputate est. Nunc risus lectus, tempor ac ornare eget, convallis commodo nisi. Aliquam ut eros quis risus euismod vestibulum. Sed et mi a diam semper congue at sit amet massa. Morbi porta dolor eu justo blandit vitae tempus nisl porttitor. Donec et magna id felis lacinia cursus.

Phasellus luctus posuere mauris id venenatis. Ut tempus tempor odio, sit amet fermentum enim porttitor vitae. Maecenas sodales sagittis risus vel tincidunt. Duis non sem nisi, sollicitudin commodo mi. Sed tempus egestas metus, eu elementum erat malesuada ac. Ut sed vulputate est. Nunc risus lectus, tempor ac ornare eget, convallis commodo nisi. Aliquam ut eros quis risus euismod vestibulum. Sed et mi a diam semper congue at sit amet massa. Morbi porta dolor eu justo blandit vitae tempus nisl porttitor. Donec et magna id felis lacinia cursus.

In scelerisque luctus arcu ac volutpat. Cras in nisi lectus. Sed suscipit lorem non lorem accumsan semper. Phasellus et lacus non lacus pharetra imperdiet. Praesent aliquam porta magna, a interdum orci ultricies in. Curabitur sed arcu lacus, a pretium tellus. Curabitur ullamcorper tincidunt est nec sodales. Donec nisi leo, sollicitudin sed tristique in, rutrum vitae ligula. Quisque arcu nisl, ullamcorper dictum ultrices non, pulvinar vel diam. In hac habitasse platea dictumst. Suspendisse pellentesque, massa a faucibus condimentum, ligula lorem pretium tortor, non posuere urna odio eget est. Integer eget condimentum tortor. Vivamus hendrerit congue nisi semper gravida.


</div>