【AngularJS】一次 float 跟 display 的效果对比
【AngularJS】一次 float 和 display 的效果对比
display 和 vertical-align的配合,达到类似卡牌的效果，如下
如果改为float，效果如下：
注意店铺7，且外层包裹的div高度为0,导致“统计信息____”的div的宽度也被拉宽
<!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的配合,达到类似卡牌的效果，如下
如果改为float，效果如下：
注意店铺7，且外层包裹的div高度为0,导致“统计信息____”的div的宽度也被拉宽