zoukankan      html  css  js  c++  java
  • 【CSS】图文混排的简单实现

    效果图:

    以上图文混排效果实现的核心是设置img的float为left,其它都是常规设置,test的宽度对混排效果不影响。

    代码:

    <!DOCTYPE html>
    <html lang="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <head>
         <title>创建动态链接的三种方式</title>
         <style type="text/css">
            #test
            {
              width: 400px;
            }
    
            #test img
            {
              float: left;
              margin-right: 10px;
            }
         </style>
        </head>
    
         <body>
            <div id="test">
      <img id="myImage" src="tribody.png" alt="image test" />
      <p>《三体》是刘慈欣创作的系列长篇科幻小说,由《三体》、《三体2:黑暗森林》、《三体3:死神永生》组成,第一部于2006年5月起在《科幻世界》杂志上连载,第二部于2008年5月首次出版,第三部则于2010年11月出版。
    作品讲述了地球人类文明和三体文明的信息交流、生死搏杀及两个文明在宇宙中的兴衰历程。其第一部经过刘宇昆翻译后获得了第73届雨果奖最佳长篇小说奖 [1]  。
    2019年,列入“新中国70年70部长篇小说典藏”。 [62] 
    2020年4月,列入《教育部基础教育课程教材发展中心 中小学生阅读指导目录(2020年版)》高中段文学阅读。
    </p>
    </div>
         </body>
    </html>
    <script type="text/javascript">
    <!--
        
    
    //-->
    </script>

    END

  • 相关阅读:
    团队冲刺第二天站立会议
    团队冲刺第一天站立会议
    Scrum仪式之Sprint计划会议
    软件需求分析
    我们的团队
    No.1_1 java语言基础_学习笔记
    java 基础学习
    LoadRunner 11 安装及破解
    Linux查看程序端口占用情况
    windows 下查看端口占用命令
  • 原文地址:https://www.cnblogs.com/heyang78/p/15665351.html
Copyright © 2011-2022 走看看