总得来说, 文字环绕图片显示的实现方式有这样两种:
通过 img 的 align 属性, 设置 img 的停靠位置, 文字会环绕显示;
给
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" 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>
web 前端开发学习 Q-q-u-n: 731771211, 分享学习的方法和需要注意的小细节, 不停更新最新的教程和学习方法 (详细的前端项目实战教学视频, PDF)
第二种: 给 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">
- </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>
来源: http://www.jianshu.com/p/2237fadc8a09