CSS基础-21CSS定位-浮动的应用,实现瀑布流布局

最新推荐文章于 2023-04-20 18:00:56 发布

zhaihaohao1

最新推荐文章于 2023-04-20 18:00:56 发布

阅读量645

点赞数

分类专栏： css基础

本文链接：https://blog.csdn.net/zhaihaohao1/article/details/47188241

版权

css基础专栏收录该内容

38 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<!--CSS定位-浮动的应用,实现瀑布流布局-->
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <link href="css03.css" type="text/css" rel="stylesheet">
</head>
<body>
<div id="mydiv1">
    <ul>
        <li>
            <img src="images/item1.jpg">
        </li>
        <li>
            <img src="images/item2.jpg">
        </li>
        <li>
            <img src="images/item3.jpg">
        </li>
    </ul>
    <ul>
        <li>
            <img src="images/item4.jpg">
        </li>
        <li>
            <img src="images/item5.jpg">
        </li>
        <li>
            <img src="images/item6.jpg">
        </li>
    </ul>
    <ul>
        <li>
            <img src="images/item7.jpg">
        </li>
        <li>
            <img src="images/item8.jpg">
        </li>
        <li>
            <img src="images/item9.jpg">
        </li>
    </ul>

</div>

</body>
</html>
css:
* {
    margin: 0px;
    padding: 0px;
}

li {
    list-style: none;
}

#mydiv1 {
    width: 950px;
    height: auto;
    margin: 20px auto;

}

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