登录 用户中心() [退出] 后台管理 注册
   
您的位置: 首页 >> SoftHub关联区 >> 主题: HTML/CSS实现文字环绕图片布局[zt]     [回主站]     [分站链接]
HTML/CSS实现文字环绕图片布局[zt]
clq
浏览(305) - 2018-03-29 19:28:12 发表 编辑

关键字: css_main

[2018-03-29 19:30:28 最后更新]
HTML/CSS实现文字环绕图片布局
https://blog.csdn.net/yiyelanxin/article/details/75006925

在一个图文并茂的网页上,文字环绕图片可以使布局美观紧凑,如何实现呢?有两种办法:
1.利用图片属性实现
代码如下:

<p style="width:400px;">
    <img src="images/bkjj.jpg" align="right" width="120" hspace="5" vspace="5">
    HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局
</p>


效果图如下:

[图片]
clq  2018-03-29 19:28:39 发表 编辑

[图片]
1


clq  2018-03-29 19:29:45 发表 编辑

[图片]

设置标签的属性align=”right”即可,如果想让图片居左,文字在右环绕,可以将align属性设置为left,其中 vspace 表示图片与文字的上下距离,hspace表示左右距离。

2.利用CSS属性实现
代码如下:

<div style="width:400px;">
    <div style="float:left; clear: both;" 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文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局CSS文字环绕图片布局
</div>


clq  2018-03-29 19:30:28 发表 编辑

[图片]

修改float=”right” 即可实现图片在右,文字在左环绕;修改float=”none” 即可实现图片与其标题独占一行,如下图:

图片独占一行

ps: float表示使文字环绕在一个元素的四周,clear表示定义某一边是否有环绕文字。



总数:3 页次:1/1 首页 尾页  
总数:3 页次:1/1 首页 尾页  


所在合集/目录
常用 css/js 更多



发表评论:
文本/html模式切换 插入图片 文本/html模式切换


附件:



NEWBT官方QQ群1: 276678893
可求档连环画,漫画;询问文本处理大师等软件使用技巧;求档softhub软件下载及使用技巧.
但不可"开车",严禁国家敏感话题,不可求档涉及版权的文档软件.
验证问题说明申请入群原因即可.

Copyright © 2005-2020 clq, All Rights Reserved
版权所有
桂ICP备15002303号-1