CSS 图像左右对齐

CSS 图像左右对齐

左右对齐图像使用的技术是浮动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 { /* 图像中间 */

                 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> 

        <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>
相关阅读:
29
28
27
950. 按递增顺序显示卡牌
 25
20190624
409. 最长回文串
 636. 函数的独占时间
 LeetCode 1046. 最后一块石头的重量(1046. Last Stone Weight) 50
LeetCode 942. 增减字符串匹配(DI String Match) 49
原文地址：https://www.cnblogs.com/lsyw/p/10727307.html