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>
    复制代码

     

    参考资料:《菜鸟教程》

     

  • 相关阅读:
    HTTP/HLS/RTMP超级负载测试工具(转)
    Jmeter监控Linux服务器性能
    装饰器做缓存
    内置装饰器
    Python装饰器 计时器记录方法执行性能
    【Python】装饰器实现日志记录
    Java对关于两个地点的根据经纬度算出后排序
    JS获得当前位置信息
    百度地图插件开发使用三 及jquery function(a.b)排序等
    css用clearfix清除浮动
  • 原文地址:https://www.cnblogs.com/yang-guang-girl/p/10381687.html
Copyright © 2011-2022 走看看