#leftcolumn a{ /* ID为 leftcolumn 的 a链接 样式 */
display:block /* 变换a标签为块级元素，这样就可以设定宽高等属性了 */
color:#333333 /* a链接的颜色为 #333333 */
background-color:#d6d6d6 /* 背景颜色为 #d6d6d6 */
margin-bottom:2px /* 下外边距为2像素 */
padding:2px /* 内边距为2像素 */
text-decoration:none /* 链接无下划线 */
font-weight:bold} /* 字体为粗体 */
下面看效果
下面是代码
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<title>d</title>
<style>
* {
margin:0
padding: 0
}
#leftcolumn a {
display:block
color:#333333
background-color:#d6d6d6
margin-bottom:2px
padding:2px
text-decoration:none
font-weight:bold
}
</style>
</head>
<body>
<br/>
<div class="" id="leftcolumn"><a href="#">ID为leftcolumn的a标签</a></div>
</body>
</html>
两种方法：
一、使用js瀑布流插件；
推荐masonry
二、使用css3样式
代码如下：
<!DOCTYPE HTML><html>
<head>
<meta http-equiv="Content-Type" content="text/html charset=utf-8">
<title>布局</title>
<style>
ul{
/* 栏宽度 */
-webkit-column-width:160px
-moz-column-width:160px
-o-colum-width:160px
column-width:160px
/* 两栏之间的间距 */
-webkit-column-gap:1px
-moz-column-gap:1px
-o-column-gap:1px
column-gap:1px
}
li{
background:#0CF
border:#069 1px solid
display:inline-block
width:150px
margin:5px 0
}
</style>
</head>
<body>
<ul>
<li style="height:50px">1</li>
<li style="height:100px">2</li>
<li style="height:80px">3</li>
<li style="height:60px">4</li>
<li style="height:70px">5</li>
<li style="height:50px">6</li>
<li style="height:100px">7</li>
<li style="height:80px">8</li>
<li style="height:90px">9</li>
<li style="height:30px">10</li>
</ul>
</body>
</html>
