<!DOCTYPE html>
<html lang="zh" ng-app="myApp">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="bower_components/bootstrap/dist/css/bootstrap.css">
<style type="text/css">
.shop-item {
background-color: slategray;
width: 180px;
/*float: left;*/
margin: 5px;
font-size: 12px;
overflow: hidden;
border: 1px solid transparent;
display: inline-block;
vertical-align: top;
}
.tag-item {
margin-top: 5px;
margin-left: 1px;
margin-bottom: 3px;
display: inline-table;
}
</style>
</head>
<body ng-controller="ShopController as vm">
<div>店铺列表</div>
<shop-view shop-list="vm.shopList"></shop-view>
<div>统计信息:_____</div>
</body>
<script src="bower_components/angular/angular.js"></script>
<script>
angular.module("myApp",[])
.controller("ShopController",function($scope){
vm= this;
vm.shopList = [
{name:'店铺1',tagList :[{name:'短裤'},{name:'护腕'}]},
{name:'店铺2',tagList :[{name:'短裤'},{name:'上衣'},{name:'跑鞋'}]},
{name:'店铺3',tagList :[{name:'超级短裤'},{name:'超级袜子'},{name:'超级跑鞋'}]},
{name:'店铺4',tagList :[{name:'短裤'},{name:'袜子'},{name:'跑鞋'}]},
{name:'店铺5',tagList :[{name:'短裤'},{name:'袜子'},{name:'跑鞋'},{name:'护腕'},{name:'计时器'}]},
{name:'店铺6',tagList :[{name:'短裤'},{name:'袜子'},{name:'跑鞋'}]},
{name:'店铺7',tagList :[{name:'短裤'},{name:'袜子'},{name:'跑鞋'}]},
{name:'店铺8',tagList :[{name:'短裤'},{name:'袜子'},{name:'护腕'},{name:'护腕'},{name:'护腕'},{name:'护腕'}]},
{name:'店铺9',tagList :[{name:'短裤'},{name:'袜子'},{name:'护腕'},{name:'护腕'}]},
{name:'店铺10',tagList :[{name:'短裤'},{name:'袜子'},{name:'帽子'},{name:'手套'},{name:'计时器'}]},
];
})
.directive("shopView",function(){
return{
restrict : 'EA',
template :
'<div><div ng-repeat="shop in shopList" class="shop-item">'+
'<div><span>{{shop.name}}</span></div>'+
'<div ng-repeat="tag in shop.tagList" class="tag-item">'+
'<span class="label label-warning">{{tag.name}}</span>'+
'</div>'+
'</div></div>',
replace : true,
scope :{
shopList : '='
},
link:function (scope,element,attrs) {
}
}
})
</script>
</html>
display 和 vertical-align的配合,达到类似卡牌的效果,如下
[img]http://dl2.iteye.com/upload/attachment/0118/3138/66378922-1e0c-3ef8-a3e0-1fa81aba7474.png[/img]
如果改为float,效果如下:
1、注意店铺7,由于店铺5的高度> 店铺4, 故其被挂在店铺5后面了,
2、由于float 脱离的文档留,故其外层div高度为0,导致“统计信息____”的div的宽度也被拉宽(解决方案是在 div内,包含一个 <div style="clear:both;"></div> 对float的效果做清理,这样可以使父div的高度被撑开)
[img]http://dl2.iteye.com/upload/attachment/0118/3142/130ac4b6-f9fc-33e8-a06d-ba22895a7055.png[/img]
总结一下:
1 float适合有文字环绕时的效果
2 inline-block:行内块效果,适合这种图片排列且换行(比如导航条、图片卡牌),占用普通文档流,且可以用 vertical-align 这个属性设置对齐方式