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

来源：互联网发布：域名重定向设置编辑：程序博客网时间：2024/06/06 09:26

<!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;}

0 0