瀑布流练手之小相册

最新推荐文章于 2023-06-24 19:26:47 发布

窥月

最新推荐文章于 2023-06-24 19:26:47 发布

阅读量173

点赞数

本文链接：https://blog.csdn.net/qq_32973061/article/details/82940975

版权

代码：

<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>float的瀑布流应用</title>
   <style type="text/css">
       *{

       }
       ul li img{
           width: 240px;
           height: 320px;
           padding: 6px;
       }
       ul{
           list-style: none;
           width: 280px;
           background-color: yellow;
           float: left;
           border: 1px solid purple;
           margin: 0;
           padding: 10px;
       }
       li{
           border: 1px solid aquamarine;
           margin: 0;
           padding: 6px;

       }
       #div1{
           width: auto;
           height: auto;
           margin:10px 200px;

       }
   </style>
</head>
<body>
<div id="div1">
   <ul>
       <li><img src="img/1.gif"></li>
       <li><img src="img/2.gif"></li>
       <li><img src="img/3.gif"></li>
   </ul>
   <ul>
       <li><img src="img/4.gif"></li>
       <li><img src="img/5.gif"></li>
       <li><img src="img/6.gif"></li>
   </ul>
   <ul>
       <li><img src="img/7.gif"></li>
       <li><img src="img/8.gif"></li>
       <li><img src="img/9.gif"></li>
   </ul>
</div>
</body>
</html>