【代码笔记】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>
复制代码

 

参考资料：《菜鸟教程》

 

posted @ 2019-02-15 09:14  花儿迎风笑  阅读(564)  评论(0)  编辑  收藏  举报