7.6　并列元素与嵌套样式

本小节将实现将一组磁贴片放在一起的效果，类似于按钮的btn-group样式，在这里取名为tile-group样式，效果如图7-7所示。

图7-7　一组磁贴在一起的显示效果

通过图7-7所示效果可以看出来，要实现一组容器的效果，除了在容器内添加一个放置标题的元素以外，左右两边还要保留10像素的内边距。由于每个tile本身在右边和底部已经有了10像素的margin值了，所以此时只需要设置tile-group样式的padding-left为10px就可以了。实现代码如下：

.tile-group {
    float: left;
    display: block;
    padding: 40px 0px 0px 10px; /* 40像素时给title标题留的位置，10像素时左边的间隙*/
    position: relative;
    color: #ffffff;
}
 
.tile-group .tile-group-title {
    font-size: 18px;
    line-height: 20px;
    position: absolute;         /* 绝对定位*/
    top: 10px;
    color: inherit;
}

这样一来，实现上述效果图的HTML代码就简单多了。代码如下：

<div class="tile-group bg-dark">
    <div class="tile-group-title">title</div>
    <div class="tile bg-red"></div>
    <div class="tile bg-green"></div>
    <div class="tile ol-orange"></div>
</div>

由于Win8风格的磁贴组，一般默认是水平显示为2个、4个、6个，一般不都不会超过7个，所以可以通过单独的样式来控制水平方向的宽度，以便让多余的磁贴tile换行显示。

.tile-group.two,
.tile-group.double { width: 270px; /* 250+10 */}
 
.tile-group.three,
.tile-group.triple { width: 400px; /* 380+10 */}
 
.tile-group.four,
.tile-group.quadro { width: 530px; /* 510+10 */}
 
.tile-group.five { width: 660px;}
.tile-group.six { width: 790px;}
.tile-group.seven { width: 920px;}

使用时只需在tile-group样式上附加一个要限制的个数样式即可。比如总共有6个tile，每行只能显示3个，此时再附加一个three样式即可。示例如下：

<div class="tile-group three bg-dark">
    <div class="tile-group-title">title</div>
    <div class="tile bg-red"></div>
    <div class="tile bg-green"></div>
    <div class="tile ol-orange"></div>
    <div class="tile bg-red"></div>
    <div class="tile bg-green"></div>
    <div class="tile ol-orange"></div>
</div>