【AngularJS】一次 float 和 display 的效果对比 -

v7sky

浏览: 76486 次

最近访客更多访客>>

jacky_dai

wang_eye

you

lordlorry

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (33)

社区版块

存档分类

【AngularJS】一次 float 和 display 的效果对比

<!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，效果如下：
1、注意店铺7，由于店铺5的高度> 店铺4, 故其被挂在店铺5后面了，
2、由于float 脱离的文档留，故其外层div高度为0,导致“统计信息____”的div的宽度也被拉宽（解决方案是在 div内，包含一个 <div style="clear:both;"></div> 对float的效果做清理，这样可以使父div的高度被撑开）