基于CSS多列实现瀑布流
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>瀑布流</title>
<link rel="stylesheet" type="text/css" href="pbl.css"/>
</head>
<body>
<div class="container">
<div><img src="img/1.jpg"/></div>
<div><img src="img/2.jpg"/></div>
<div><img src="img/3.jpg"/></div>
<div><img src="img/4.jpg"/></div>
.
.
.
</div>
</body>
</html>css
*{
padding: 0px;
margin: 0px;
}
.container{
width: 1000px;
column-width: 100px;
-webkit-columns-width: 100px;/* safari chrome */
/* -ms- ie */
/* -o opera */
-moz-columns-width: 100px;/* firefox */
column-gap: 5px;
-webkit-column-gap: 5px;
-ms-column-gap: 5px;
-o-column-gap: 5px;
-moz-column-gap: 5px;
margin: 0px auto;
}
.container div{
width: 100px;
border: 1px #000000 solid;
margin-top: 5px;
text-align: center;
word-wrap:break-word;
}
.container img{
width: 100px;
height: auto;
display: block;
}相关推荐
html表格 横跨多行--跨多列
colspan="2"//表示跨两列rowspan="2//表示跨两行
时间：2024-05-02 14:21
