左右对齐图像使用的技术是浮动div元素。

float:left 左对齐

float:right右对齐

示例

<!DOCTYPE html>
<html>
    <head>
        <title>图像左右对齐</title>
        <meta charset="UTF-8">
        <style type="text/css">
            body {
                font-family: Georgia, "Times New Roman", serif;     /* 字体样式 */
                color: #665544;}                          /* 字体颜色 */
            img.align-left  {                            /* 图片左边对齐 */
                float: left;                            /* 悬浮 左边 显示  */
                margin-right: 10px;}                     /* 右边外边距 10 像素 */
            img.align-right {                             /* 图片右边对齐  */
                float: right;                          /* 悬浮 右边 显示 */
                margin-left: 10px;}                      /* 左边外边距 10 像素 */  
            img.medium {                      /* 图像中间 */
                width: 250px;                /* 宽度250 像素 */
                height: 250px;}            /* 高度250像素 */
        </style>
    </head>
    <body>
        <h1>软件开发，成就梦想</h1>
        <h2>学编程，上利永贞网 https://www.liyongzhen.com/</h2>         
        <p><img src="https://www.0735it.net/images/kc/jspservlet.jpg" alt="Servlet/JSP课程"  class="align-left medium" /><b><i>Servlet</i>
</b> 用Java编写的服务器端程序，可以交互式地浏览和修改数据，生成动态Web内容。是Java企业级应用技术第一站。</p>       <!--网页插入图片格式:<img src="地址.png" alt="所要显示的文字" class="CSS样式"/>-->
        <p><img src="https://www.0735it.net/images/kc/h5.jpg" alt="HTML5 课程"  class="align-right medium" />
<b><i>HTML5</i></b> 由万维网联盟（W3C）2014年10月完成標準制定，取代1999年所制定的HTML 4.01和XHTML 1.0標準。HTML5 已广泛应用于各行各业。</p>
    </body>
</html>

CSS 图像左右对齐的更多相关文章

  1. CSS 图像居中对齐

    CSS  图像居中对齐 我们在<CSS 内外边距>学过内容居中,它的原理是将外边左右设置为auto.图像居中也是这个原理. 示例 <!DOCTYPE html> <htm ...

  2. CSS 图像

    CSS 图像 <上一节下一节> 通过CSS可以控制图像的大小和对齐方式. 图像大小 虽然在HTML中,img标签有属性height.width设置高和宽,在工作中却使用得非常少,通常使用C ...

  3. 【原】css实现两端对齐的3种方法

    说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐.右对齐的方式来对齐页面 ...

  4. css文字两端对齐

    css文字两端对齐 text-align:Justify(火狐); text-justify:inter-ideograph(IE) text-justify(IE) 基本语法 text-justif ...

  5. css实现两端对齐的3种方法

    两端对齐在移动端非常见,说到两端对齐,大家并不陌生,在word.powerpoint.outlook等界面导航处,其实都有一个两端对齐(分散对齐)的按钮,平时使用的也不多,我们更习惯与左对齐.居中对齐 ...

  6. CSS实现两端对齐效果

    CSS实现两端对齐效果 两端对齐,从概念上来说,其实不难理解.如果不明白什么叫两端对齐,可以玩玩word等办公软件. 下面谈谈如何实现文本的两端对齐.我所知道的大概有以下几种方法 text-align ...

  7. css 图像热区

    CSS图像热区 在img标签当中,存在一个属性usemap属性,用来和map标签进行绑定,从而实现图像热区.所谓的图像热区,其实指的是在图像中插入一个连接,当用户点击图像的指定区域后就会进行页面跳转. ...

  8. CSS 图像大小

    CSS 图像大小 虽然在HTML中,img标签有属性height.width设置高和宽,在工作中却使用得非常少,通常使用CSS来控制大小. 给盒子设置属性height.width限制大小.单位通常是像 ...

  9. CSS 图像拼合技术

    CSS 图像拼合技术 一.图像拼合 图像拼合就是单个图像的集合. 有许多图像的网页可能需要很长的时间来加载和生成多个服务器的请求. 使用图像拼合会降低服务器的请求数量,并节省带宽. 二.图像拼合 - ...

随机推荐

  1. DB SQL Monitor 会话状态及等待事件监控工具

    DB SQL Monitor v1.7.6       Designed by Wang Zhaoguan   工具说明 --------------------------------------- ...

  2. 微信小程序自运营器 微信小程序自动运营器（让你的微信小程序，公众号零运营成本，24小时全自动运营）

    自动发单,自动评价,自动评论,自动推广 微信小程序自运营器  微信小程序自动运营器(让你的微信小程序,公众号零运营成本,24小时全自动运营) 我们会根据你的微信公众号或微信小程序定制开发带有一定AI智 ...

  3. 常用Linux终端命令行的快捷键列表

    终端有很多快捷键,不太好记,常用的在这里 Ctrl+r 实现快速检索使用过的历史命令.Ctrl+r中r是retrieve中r. Ctrl+a:光标回到命令行首. (a:ahead) Ctrl+e:光标 ...

  4. DS-1

    一.作业题目 仿照三元组或复数的抽象数据类型写出有理数抽象数据类型的描述 (有理数是其分子.分母均为整数且分母不为零的分数). 有理数基本运算: 构造有理数T,元素e1,e2分别被赋以分子.分母值 销 ...

  5. 51nod1220 约数之和

    http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1220 $G(n)=\sum\limits_{i=1}^n\sum\lim ...

  6. JavaScript获取元素CSS计算后的样式

    原文链接https://www.w3ctech.com/topic/40 我们在开发过程中,有时候需要根据元素已有样式来实现一些效果,那我们应该如何通过JavaScript来获取一个元素计算后的样式值 ...

  7. redis4.0.13主从、哨兵、集群3种模式的 Server端搭建、启动、验证

    本文使用的是redis-4.0.13.tar.gz版本. 两个centos7系统虚拟机:192.168.10.140.192.168.10.150 redis各版本下载地址:http://downlo ...

  8. css定义好看的垂直滚动条

    滚动条的css样式主要有三部分组成: 1.::-webkit-scrollbar   定义了滚动条整体的样式:    2.::-webkit-scrollbar-thumb  滑块部分:     3. ...

  9. html字体加粗标签与写法

    在html中字体加粗的标签为<b>标签,当我们使用了该标签,字体就会加粗,一般用于注明重要信息,强调文字上面写法如下 字体加粗:<b>这里的字体就会加粗</b> 效 ...

  10. windows 下借助7zip实现命令行解压缩

    windows 下借助7zip实现命令行解压缩 64位电脑下载 https://www.7-zip.org/a/7z1805-x64.exe 安装 安装目录下所有文件如下: 在命令行下只需要用到 7z ...