css3-浮动制作的简单瀑布流

最新推荐文章于 2022-06-20 09:49:49 发布

RedGuy_anluo

最新推荐文章于 2022-06-20 09:49:49 发布

阅读量1.0k

点赞数

分类专栏： CSS3 文章标签： css3

本文链接：https://blog.csdn.net/RedGuy_anluo/article/details/50471467

版权

CSS3 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>瀑布流</title>
    <link href="waterStyle.css" rel="stylesheet" type="text/css">
</head>
<body>
    <div id="div1">
        <ul>
            <li><img src="img/1.png"></li>
            <li><img src="img/2.png"></li>
            <li><img src="img/3.png"></li>
        </ul>
            <ul><li><img src="img/4.png"></li>
                <li><img src="img/5.png"></li>
                <li><img src="img/6.png"></li>
            </ul>
            <ul>
                <li><img src="img/7.png"></li>
                <li><img src="img/8.png"></li>
                <li><img src="img/9.png"></li>
            </ul>
    </div>
</body>
</html>

*{
    /*通配符：对接下来的所有代码都会起效果*/
    margin: 0px;
    padding: 0px;

}
li{
    list-style: none;
}
#div1{
    width:950px;
    height: auto;
    /*前边的代表上下适应，后边的代表左右适应*/
    margin: 20px auto;

}
ul{
    width: 250px;
    float: left;
}