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

  • 相关阅读:
    TableExport导出失败问题
    gitlab备份、恢复、升级
    读书笔记一【加密——替换法】
    读书笔记一【加密——换位法】
    解决Kettle ETL数据乱码
    SQL中exsit和in
    Centos下搭建邮件服务器
    2018总结及2019计划
    mac安装gcc
    Vue.js学习 Item11 – 组件与组件间的通信
  • 原文地址:https://www.cnblogs.com/heyang78/p/15665351.html
Copyright © 2011-2022 走看看