很久没有研究CSS了，成天用各种框架也基本都不需要自己写，最近要做一个相册页面，碰到的第一个问题就是如何排布。先给出设计稿，然后再说说样式如何写

分析一下，有一个容器，容器有padding，每一行的每一个item之间又有margin，首先想到的是这样

.container {
  padding: 10px;
}
 
.container .item {
  float: left;
  width: 24%;
  margin-left: 1%;
  border: 1px solid #CCC;
}

...

默认在ng-repeat的时候每一个item都要保证是唯一的，否则console就会打出error告诉你哪个key/value是重复的。如

$scope.items = [
  'red',
  'blue',
  'yellow',
  'white',
  'blue'
];

这个数组blue就重复了，遍历它

<li ng-repeat="item in items">{{ item }}</li>

控制台就会抛出一个错误:

Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: item in items, Duplicate key: string:blue, Duplicate value: blue

...