【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的高度被撑开）

总结一下：
1 float适合有文字环绕时的效果
2 inline-block：行内块效果，适合这种图片排列且换行（比如导航条、图片卡牌），占用普通文档流，且可以用 vertical-align 这个属性设置对齐方式

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

猜你喜欢