column-count中列空白的问题
请问一下下面的代码中为什么会出现空白列<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>无标题文档</title>
<style>
.list{margin:0 ;padding:0;
-webkit-column-count:7; -webkit-column-gap:1px; -webkit-column-rule:1px solid #000;
width:1200px; height:45px;
border:10px solid black;
}
.list div{height:90px;width:150px;background:red;text-align:left;}
.list div a{width:40px;margin:0 0px; font:12px/30px "宋体"; text-align:left;display:inline-block;background:rgb(255,255,0)}
</style>
</head>
<body>
<div class="list">
<div>
<a href="#">新浪</a>
<a href="#">新浪</a>
<a href="#">新浪</a>
<a href="#">新浪</a>
<a href="#">新浪</a>
<a href="#">新浪</a>
<a href="#">新浪</a>
<a href="#">新浪</a>
<a href="#">新浪</a>
</div>
<div>
<a href="#">新浪</a>
<a href="#">新浪</a>
<a href="#">新浪</a>
<a href="#">新浪</a>
<a href="#">新浪</a>
<a href="#">新浪</a>
<a href="#">新浪</a>
<a href="#">新浪</a>
<a href="#">新浪</a>
</div>
<div>
<a href="#">新浪</a>
<a href="#">新浪</a>
<a href="#">新浪</a>
<a href="#">新浪</a>
<a href="#">新浪</a>
<a href="#">新浪</a>
<a href="#">新浪</a>
<a href="#">新浪</a>
<a href="#">新浪</a>
</div>
</div>
</body>
</html>
页:
[1]