详解： 7案例，浮动排列

最新推荐文章于 2022-12-05 10:16:27 发布

贵哥的编程之路(热爱分享)

最新推荐文章于 2022-12-05 10:16:27 发布

阅读量355

点赞数

分类专栏： CSS3最详解

本文链接：https://blog.csdn.net/qq_37805832/article/details/105743652

版权

CSS3最详解专栏收录该内容

54 篇文章 1 订阅

订阅专栏

核心:这些都是从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>-->

贵哥的编程之路(热爱分享)

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
详解： 7案例，浮动排列

核心:这些都是从1开始的哈,自己找图片，重命名即可。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> ...
复制链接

扫一扫