Skip to content

Commit

Permalink
ADDED 饱满的卡片列表布局
Browse files Browse the repository at this point in the history
  • Loading branch information
codelegant committed Mar 12, 2017
1 parent 47022e2 commit f08d9cc
Show file tree
Hide file tree
Showing 2 changed files with 47 additions and 0 deletions.
20 changes: 20 additions & 0 deletions full-card-list/index.html
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="zh-Hans">
<head>
<meta charset="UTF-8">
<title>Full Card List</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>
27 changes: 27 additions & 0 deletions full-card-list/style.css
@@ -0,0 +1,27 @@
div,ul,li{
margin:0;
padding:0;
}
body{
background: #f2f2f2;
}
.container{
margin: 40px auto -20px;
width:1200px;
overflow: hidden;
background: #ddd;
}
ul{
margin:0 0 -20px -20px;
list-style: none;
display:table;//这两个属性是消除
word-spacing: -6px;//li 中display:inline-block 带来的间距
}
li{
display: inline-block;
margin:0 0 20px 20px;
vertical-align: top;
width: 285px;
height: 200px;
background: #bbb;
}

0 comments on commit f08d9cc

Please sign in to comment.