Question

我想这样做。
我有一个div，会有一个带有一些文字的图像，所以我想要左上角的图像然后发短信。

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

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

enter image description here

Answer 1

您提供图片float:left;

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 2

<img>标记的css上的

使用此

{
    float:left;
}

或在html中尝试这个。

<img style="float:left;">

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

2 个答案: