详解： 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>-->
贵哥的编程之路
原创文章 107 获赞 14 访问量 1371
关注私信
详解： 7案例，浮动排列

猜你喜欢
