左右对齐图像使用的技术是浮动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. css格式

    <head> <style>body {color:#000000;font-weight:normal;} .c1{ color: #fff; background-colo ...

  2. 远程访问服务器tensorboard

    转自https://blog.csdn.net/Hansry/article/details/83004648 1. 在登录远程服务器的时候使用命令: : server_name@server.add ...

  3. ubuntu中连接mssql数据库sqlserver

    参考文章 https://blog.csdn.net/fangaoxin/article/details/5386149 (感谢作者) sudo apt-get install tdsodbc sud ...

  4. SX_WIN10X64LTSB2016_EN_LITE英文精简版

    SX_WIN10X64LTSB2016_EN_LITE英文精简版该版本为英文版!该版本为英文版!该版本为英文版!因为论坛巴基斯坦的maanu兄弟PM我,所以抽空做了一个.介绍沿用原来的,中文用谷歌翻译 ...

  5. Lubuntu下安装Python3.6

    Lubuntu下系统自带的Python版本是2.X,由于开发环境要求Python3,于是我们安装Python3.6 1.在终端输入以下命令: sudo add-apt-repository ppa:j ...

  6. sql 查询结果转百分比

    select convert(varchar,convert(decimal(10,2),迟到人次*1.0/在校生人数*100))+'%'

  7. Ubuntu16.04主题美化

    系统更新 sudo apt-get update sudo apt-get upgrade # 卸载libreOffice libreoffice是ubuntu自带的开源office软件,体验效果不如 ...

  8. Troubleshooting 10g and 11.1 Clusterware Reboots (文档 ID 265769.1)

    Troubleshooting 10g and 11.1 Clusterware Reboots (文档 ID 265769.1) This document is intended for DBA' ...

  9. element-ui-verify使用

    element-ui-verify是对ElementUI原本的校验封装之后的插件,并不会影响使用ElementUI的原生校验. 使用环境为vue+element-ui+webpack模块环境,首先使用 ...

  10. 对象名 'dbo.__MigrationHistory' 无效 错误解决

    // 在数据库上下文的构造方法里 public GewPeAppContext() : base(ConnectionStrings.GewPeAppConnectionString) { // 添加 ...