原文: https://blog.csdn.net/yiyelanxin/article/details/75006925

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

<p style="width:400px;">
<img src="data: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>

效果图如下:

设置标签的属性align="right"即可,如果想让图片居左,文字在右环绕,可以将align属性设置为left,其中 vspace 表示图片与文字的上下距离,hspace表示左右距离。
如果是两段及以上文字环绕图片,实现方法:

<div style="width:500px;">
<img src="data: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 style="width:400px;">
<div style="float:left; clear: both;" align="center">
<img src="data: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>

效果图如下:

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

如果是两段及以上文字环绕图片,实现方法:

<div style="width: 500px;">
<div style="float: left; clear: both;" align="center">
<img src="data:images/bkjj.png" width="120" alt="" hspace="8"><br />
图像标题
</div>
<p>HTML文字环绕图片布局HTML文字环绕图片布局HTML文字环绕图片布局</p>
<p>第二段HTML文字环绕图片布局第二段HTML文字环绕图片布局第二段HTML文字环绕图片布局第二段HTML文字环绕图片布局第二段HTML文字环绕图片布局第二段HTML文字环绕图片布局第二段HTML文字环绕图片布局第二段HTML文字环绕图片布局第二段HTML文字环绕图片布局第二段HTML文字环绕图片布局第二段HTML文字环绕图片布局第二段HTML文字环绕图片布局第二段HTML文字环绕图片布局</p>
</div>

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

HTML/CSS实现文字环绕图片布局的更多相关文章

  1. css文字环绕图片--遇到的问题及解决方法

    一.前言 需要实现一个文字环绕图片的效果,心想so easy嘛. 1)代码部分 <style> .img-left { border: 3px solid #005588; width:3 ...

  2. Bootstrap 3之美03-独立行,文字环绕,图片自适应,隐藏元素

    本篇主要包括: ■  添加独立的一行■  文字环绕■  图片自适应■  隐藏元素 添加独立的一行 在id为body的section和id为main的section之间,添加2张图片. 我们发现,新加的 ...

  3. html小知识点汇总(浏览器导航上显示图标、div无高度时试着清除浮动、文字环绕图片、字体加粗、div按百分比分、已有的不合适的class,针对特定的标签进行修改)

    1.新点击的网页,在浏览器导航上显示图标: 像这种效果: <head> <meta charset="UTF-8"> <meta name=" ...

  4. wps如何设置文字环绕图片

    wps在编辑一些文字的时候,经常会插入一些图片,但是插入图片后,文字和图片就被分离开来,整体显得没有那么美观整洁,这个时候就用到了软件的文字环绕功能,那么具体如何设置呢,接下来看教程. 首先打开wps ...

  5. CSS实现文字和图片的水平垂直居中

    关于文字和图片的水平垂直居中,在前端界绝对算是一个老生常谈的问题了,尤其是垂直居中,什么千奇百怪的解法都能想的出来.下面我就总结一些比较常用的方法: 一.文本的水平垂直居中: 1.水平居中: 是不是很 ...

  6. 精通CSS+DIV网页样式与布局--图片效果

    提到图片效果,小伙伴们可能会想到美图秀秀,ps等,这些软件都是款非常不错的照片处理软件,包括常用的:黑白,增强,高斯,高对比,夜视,老照片和铅笔画等等.不管你是否是专业的 照片拍摄人员,我们都可以通过 ...

  7. (转)css中通常会用到浮动与清除,也是一个必须掌握的知识点,概念性的东西不多说,下面举几个例子,来说明它的用法:1.文字环绕效果 2.多个div并排显示 3.清除浮动(默认显示)

    一.文字环绕效果: html代码如下: 1 <body> 2 3 <style type="text/css"> 4 #big img {float: le ...

  8. 《css揭秘》下(伪元素,文字背景,垂直居中技巧,文字环绕)

    本篇主要记录<CSS3揭秘>一书中后面几章的常用技巧. 1.伪元素换行 先看下HTML代码,如下 <div class="demo1"> <div c ...

  9. 图片布局css

    对于平时项目开发中,经常要展示图片.什么水平居中显示,垂直居中显示,水平或垂直居中显示...我们的发际线就是这样往后退的. 接下来要讲的就是对于各种图片布局的css实现(这里针对的是img标签的不会使 ...

随机推荐

  1. Mybaits基本的CURD操作

    1 首先在Mapper.xml配置 <!-- parameterType:参数类型,可以省略, 获取自增主键的值: mysql支持自增主键,自增主键值的获取,mybatis也是利用stateme ...

  2. 方法二破解:Excel工作表保护密码

    最简单,复制整表,粘贴在全新的表中.但是有时候会丢失一些元素 在excel2016中实测验证过有效 第1步:在工作表菜单栏上添加[开发工具].方法是:依次单击[文件]--->[选项]---> ...

  3. 从输入url到页面展现的过程

    先看一幅图:(下面的所有图我都进行拉伸压缩了  如果看不到  可以右键复制图片地址 然后到浏览器粘贴查看  不然显示不全图片) mac没有画图软件  不好意思  xmind做的 1. 输入网址   当 ...

  4. 安装ubuntu双系统

    今天在win7下安装ubuntu14.1双系统,别折磨了一个下午.主要是开机系统引导问题. 引导程序是位于硬盘最前面的一段程序,由于扇区大部分是引导程序,故也成引导扇区.此外包含有硬盘的分区信息,共6 ...

  5. 为什么我上传了flv或MP4文件到服务器,可输入正确地址通过http协议来访问总是出现“无法找到该页”的404错误呢

    常用MIME类型(Flv,Mp4的mime类型设置) 也许你会在纳闷,为什么我上传了flv或MP4文件到服务器,可输入正确地址通过http协议来访问总是出现“无法找到该页”的404错误呢?这就表明mp ...

  6. MYSQL常见安装错误集:[ERROR] --initialize specified but the data directory has files in it. Abort

    1.[ERROR] --initialize specified but the data directory has files in it. Abort [错误] -初始化指定,但数据目录中有文件 ...

  7. 6.824 Lab 3: Fault-tolerant Key/Value Service 3A

    6.824 Lab 3: Fault-tolerant Key/Value Service Due Part A: Mar 13 23:59 Due Part B: Apr 10 23:59 Intr ...

  8. idea中配置tomcat详细

    1:首先要添加一个tomcat流程 2:配置tomcat: 3:配置tomcat中的deployment(就是配置你需要部署的工程) 4:配置tomcat中需要输出的日志logs 5:启动 tomca ...

  9. tensorflow实践学习一

    前言: 最近开始学习tensorflow框架,主要参考<TensorfFlow技术解析与实战>这本书,如果有同学需要这本书的PDF版,可以给我评论里留下邮箱,我看到了会发给你 正文 1.T ...

  10. 从零构建vue项目(一)--搭建node环境,拉取项目模板

    本文是基于vuecli2搭建的项目. 1. 下载安装nodejs     地址:https://nodejs.org/en/download/ 选择安装版windows .msi, 不要选择压缩版 下 ...