详解： 7案例，浮动排列

核心:这些都是从1开始的哈,自己找图片，重命名即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        *{padding: 0px;margin: 0px;}
        .courseList
        {
            width: 650px;
            margin: 20px auto;
            border: 1px solid red;
        }
        .courseList img
        {
            width: 120px;
            height: 120px;
        }
        .courseList img:nth-of-type(odd)//奇数
        {
            float: left;
            margin-left: 10px;
        }
        .courseList img:nth-of-type(even)//偶数
        {
                    float: right;
                    margin-right: 10px;
        }

    </style>
</head>
<body>
    <div class="courseList">
        <img src="./1.jpg">
        <p>李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文</p>
        <img src="./1.jpg">
        <p>李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文</p>

<img src="./1.jpg">
        <p>李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文</p>

<img src="./1.jpg">
        <p>李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文李文</p>

    </div>
</body>
</html>-->
posted @ 2020-04-25 01:21  贵哥的编程之路  阅读(3)  评论(0)    收藏  举报