语言表达能力有限,直接上图。我想做的效果就是左侧是导航标题,右侧是对应的内容条目。
但是右侧内容条目数目不固定,因此对应的高度也不固定。这效果看似简单,但本人半天没想出来,苦读一天文档,终于找到解决方案(angularjs写的)。
<style>
.itemGroup {
position: relative;
}
.itemGroupTitle {
text-align: center;
color: white;
font-weight: bold;
position: static;
}
.itemGroupTitle1 {
position: absolute;
width: inherit;
height: 100%;
}
.itemGroupTitle2 {
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0;
margin: auto;
width: 140px;
height: 20px;
}
</style>
<div class="row itemGroup" ng-repeat="item in keyTypes.dataSource">
<div class="col-sm-2 itemGroupTitle">
<div class="itemGroupTitle1"><div class="itemGroupTitle2">{{item.GroupName}}></div></div>
</div>
<div class="col-sm-10 itemGroupContent">
<div class="row">
<div class="col-sm-6 item" ng-repeat="keytype in item.keyTypes">{{keytype.KeyTypeName}}</div>
</div>
</div>
</div>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。