zoukankan      html  css  js  c++  java
  • 【代码笔记】Web-CSS-CSS Float(浮动)

    一, 效果图。

    二,代码。

    复制代码
    <!DOCTYPE html>
    <html>
    
    <head>
        <meta charset="utf-8">
        <title>CSS 浮动</title>
        <style>
        img {
            float: right;
        }
        
        .thumbnail {
            float: left;
            width: 110px;
            height: 90px;
            margin: 5px;
        }
        
        .text_line {
            clear: both;
            margin-bottom: 2px;
        }
        </style>
    </head>
    
    <body>
        <p>In the paragraph below, we have added an image with style <b>float:right</b>. The result is that the image will float to the right in the paragraph.</p>
        <p>
            <img src="logocss.gif" width="95" height="84" /> This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text. This is some text.
        </p>
        <h3>Image Gallery</h3>
        <p>Try resizing the window to see what happens when the images does not have enough room.</p>
        <img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
        <img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
        <img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
        <img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
        <img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
        <img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
        <img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
        <img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
        <h3>Image Gallery</h3>
        <p>Try resizing the window to see what happens when the images does not have enough room.</p>
        <img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
        <img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
        <img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
        <img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
        <h3 class="text_line">Second row</h3>
        <img class="thumbnail" src="/images/klematis_small.jpg" width="107" height="90">
        <img class="thumbnail" src="/images/klematis2_small.jpg" width="107" height="80">
        <img class="thumbnail" src="/images/klematis3_small.jpg" width="116" height="90">
        <img class="thumbnail" src="/images/klematis4_small.jpg" width="120" height="90">
    </body>
    
    </html>
    复制代码

     

    参考资料:《菜鸟教程》

     

  • 相关阅读:
    推荐谷歌浏览器12款常用的扩展
    推荐谷歌浏览器12款常用的扩展
    推荐VSCode12个比较实用的插件
    推荐VSCode12个比较实用的插件
    Linux中Shell循环结构for用法笔记
    django之上传图片
    django之中间件设置
    django之admin站点
    django之管理静态文件
    django之设置分页
  • 原文地址:https://www.cnblogs.com/yang-guang-girl/p/10381687.html
Copyright © 2011-2022 走看看