HTMLCSS实现⽂字环绕图⽚布局
原⽂:
在⼀个图⽂并茂的⽹页上，⽂字环绕图⽚可以使布局美观紧凑，如何实现呢？有两种办法：
1.利⽤图⽚属性实现
代码如下：
<p >
<img src="images/bkjj.jpg" align="right" width="120" hspace="5" vspace="5">
HTML⽂字环绕图⽚布局HTML⽂字环绕图⽚布局HTML⽂字环绕图⽚布局HTML⽂字环绕图⽚布局HTML⽂字环绕图⽚布局HTML⽂字环绕图⽚布局HTML⽂字环绕图⽚布局HTML⽂字环绕图⽚布局HTML⽂字环绕图⽚布局HTML⽂字环绕图⽚布局HTM </p>
效果图如下：
设置标签的属性align="right"即可，如果想让图⽚居左，⽂字在右环绕，可以将align属性设置为left，其中 vspace 表⽰图⽚与⽂字的上下距离，hspace表⽰左右距离。
如果是两段及以上⽂字环绕图⽚，实现⽅法：
<div >
<img src="images/bkjj.png" align="right" width="120" hspace="5" vspace="5" />
<p>HTML⽂字环绕图⽚布局HTML⽂字环绕图⽚布局HTML⽂字环绕图⽚布局</p>
<p>第⼆段HTML⽂字环绕图⽚布局第⼆段HTML⽂字环绕图⽚布局第⼆段HTML⽂字环绕图⽚布局第⼆
段HTML⽂字环绕图⽚布局第⼆段HTML⽂字环绕图⽚布局第⼆段HTML⽂
字环绕图⽚布局第⼆段HTML⽂字环绕图⽚布局第⼆段HTML⽂字环绕图⽚布局第⼆段HTML⽂字环绕图⽚布局第⼆段HTML⽂字环绕图⽚布局第⼆段HTML⽂字环绕图⽚布局第
⼆段HTML⽂字环绕图⽚布局第⼆段HTML⽂字环绕图⽚布局</p>
</div>
效果图：
2.利⽤CSS属性实现
代码如下：
<div >
<div align="center">
<img src="images/bkjj.jpg" width="120" alt="" hspace="8"><br />图像标题
</div>
CSS⽂字环绕图⽚布局CSS⽂字环绕图⽚布局CSS⽂字环绕图⽚布局CSS⽂字环绕图⽚布局CSS⽂字环绕图⽚布局CSS⽂字环绕图⽚布局CSS⽂字环绕图⽚布局CSS⽂字环绕图⽚布局CSS⽂字环绕图⽚布局CSS⽂字环绕图⽚布局CSS⽂字环绕图⽚</div>
效果图如下：
修改float=“right” 即可实现图⽚在右，⽂字在左环绕；修改float=“none” 即可实现图⽚与其标题独占⼀⾏，如下图：
如果是两段及以上⽂字环绕图⽚，实现⽅法：css实现三列布局
<div >
<div align="center">
<img src="images/bkjj.png" width="120" alt="" hspace="8"><br />
图像标题
</div>
<p>HTML⽂字环绕图⽚布局HTML⽂字环绕图⽚布局HTML⽂字环绕图⽚布局</p>
<p>第⼆段HTML⽂字环绕图⽚布局第⼆段HTML⽂字环绕图⽚布局第⼆段HTML⽂字环绕图⽚布局第⼆段HTML⽂字环绕图⽚布局第⼆段HTML⽂字环绕图⽚布局第⼆段HTML⽂字环绕图⽚布局第⼆段HTML⽂字环绕图⽚布局第⼆段HTML⽂字环绕图⽚</div>
ps: float表⽰使⽂字环绕在⼀个元素的四周，clear表⽰定义某⼀边是否有环绕⽂字。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。