css文字在图片下方_web前端入门到实战:CSS让文字环绕图片显示

css文字在图片下方_web前端入门到实战:CSS让文字环绕图片显示
css文字在图片下方_web前端入门到实战:CSS让文字环绕图片显示

总得来说,文字环绕图片显示的实现方式有这样两种

  1. 通过img的 align 属性, 设置img的停靠位置,文字会环绕显示;
  2. img单独加一个父级div容器,设置css属性:float:left ; clear:both 设置align属性:align='center'

第一种:通过img的 align 属性, 设置img的停靠位置,文字会环绕显示:

<body> <div class="example-container">     <img id="example-element" align='left' class="transition-all" src="../assets/round-balloon.png" alt="css文字在图片下方_web前端入门到实战:CSS让文字环绕图片显示" width="150"> " We had agreed, my companion and I, that I should call for him at his house, after dinner, not later than eleven o’clock. This athletic     young Frenchman belongs to a small set of Parisian sportsmen, who have taken up “ballooning” as a pastime. After having exhausted all the sensations that are to be found in ordinary sports, even those of “automobiling” at a breakneck speed, the     members of the “Aéro Club” now seek in the air, where they indulge in all kinds of daring feats, the nerve-racking excitement that they have ceased to find on earth." </div> <style>  .example-container {      height: auto;      width: 500px;      margin: auto;      border: 1px solid green; } </style> </body>

第二种:给img单独加一个div容器,设置css属性:float:left ; clear:both 设置align属性:align='center'

<body>     <div class="example-container">         <div align="center" style="float:left; clear:both">             <img id="example-element" class="transition-all" width="150" src="../assets/round-balloon.png" alt="css文字在图片下方_web前端入门到实战:CSS让文字环绕图片显示">         </div>         " We had agreed, my companion and I, that I should call for him at his house, after dinner, not later than eleven o’clock. This athletic     young Frenchman belongs to a small set of Parisian sportsmen, who have taken up “ballooning” as a pastime. After having exhausted all the sensations that are to be found in ordinary sports, even those of “automobiling” at a breakneck speed, the     members of the “Aéro Club” now seek in the air, where they indulge in all kinds of daring feats, the nerve-racking excitement that they have ceased to find on earth."     </div>     <style>         .example-container {         height: auto;         width: 500px;         margin: auto;         border: 1px solid green;     }     </style> </body>

在学习上有什么疑问随时可以找我我,与大家分享互联网web前端实战操作,无论你是否有基础,我都欢迎。点:前端技术分享