原文: 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. linux shell 中"2>&1"含义-完美理解-费元星

    笨鸟先飞,先理解.   脚本是:      nohup /mnt/Nand3/H2000G  >/dev/null  2>&1  &      对于& 1 更准确的 ...

  2. 《Using Databases with Python》 Week2 Basic Structured Query Language 课堂笔记

    Coursera课程<Using Databases with Python> 密歇根大学 Week2 Basic Structured Query Language 15.1 Relat ...

  3. Oracle不完全恢复-主动恢复和incarnation/RMAN-20208/RMAN-06004

    12.3 主动恢复 主动不完全恢复是将数据库“撤回”到从前的传统方法,主要用来撤销认为修改.一般需要先判断PIT点的时间或SCN --1 重启db到mount状态 --2 用restore将所有的数据 ...

  4. Cygwin 技巧

    apt-cyg mirror 'https://mirrors.aliyun.com/cygwin/' #设置镜像 windows下安装工具包 inetutils;其中包含telnet等命令; Pyt ...

  5. java调用com组件com4j

    com4j A Java library that allows Java applications to seemlessly interoperate with Microsoft Compone ...

  6. ubuntu18.04 安装mongodb并使用Robo 3T连接Mongodb数据库

    1.前提: 系统:ubuntu18.04  64位 数据库:mongodb GUI:Robo 3T  2018.3.0 描述: mongodb 安装在局域网内的ubuntu的机子上面,  在win 下 ...

  7. Linux操作系统目录一览表

    / // 根目录 /bin //存放必要的命令 比如ls.cp.mkdir等命令 /boot //存放内核以及启动所需的文件 /dev //存放硬件设备文件 比如声卡.磁盘.光驱 /etc //存放系 ...

  8. [转帖]Oracle dba_objects和all_objects 最大的区别

    Oracle dba_objects和all_objects 最大的区别 原创 Oracle 作者:maohaiqing0304 时间:2015-08-14 15:07:18  9281  0   链 ...

  9. Luogu P4040 [AHOI2014/JSOI2014]宅男计划

    题目 显然存活天数与叫外卖次数的函数是凸函数. 所以三分买外卖的次数. 然后把食品按保质期升序排序. 并且单调栈搞一下,把又贵又保质期短的丢掉. 那么随着保质期的增加,食品的价格一定上涨. 所以我们从 ...

  10. yii日志保存机制

    一.修改yii框架的配置文件(main.php) 'log' => array( 'class' => 'CLogRouter', 'routes' => array( array( ...