AUI在线文档AUI媒体列表
AUI媒体列表
媒体布局aui-media-list是与aui-list结合使用的一种形式，可以实现有图片，多行文字等的布局样式，结合栅格系统可以实现更多布局效果
<div class="aui-content aui-margin-b-15"> <ul class="aui-list aui-media-list"> <li class="aui-list-header"> 图文列表 </li> <li class="aui-list-item aui-list-item-arrow"> <div class="aui-media-list-item-inner"> <div class="aui-list-item-inner"> <div class="aui-list-item-text"> <div class="aui-list-item-title">带有媒体的列表一</div> <div class="aui-list-item-right">08:00</div> </div> <div class="aui-list-item-text aui-ellipsis-2"> 这里是内容区域，新版中的列表布局可以很轻松的帮助开发者完成常见列表样式。 </div> </div> </div> </li> <li class="aui-list-item"> <div class="aui-media-list-item-inner"> <div class="aui-list-item-media"> <img src="../../image/demo1.png"> </div> <div class="aui-list-item-inner"> <div class="aui-list-item-text"> <div class="aui-list-item-title">带有媒体的列表二</div> <div class="aui-list-item-right">08:00</div> </div> <div class="aui-list-item-text"> 在下方我们加入了aui-info信息条 </div> </div> </div> <div class="aui-info" style="padding-top:0"> <div class="aui-info-item"> <img src="../../image/liulangnan.png" style="width:1rem" class="aui-img-round" /><span class="aui-margin-l-5">流浪男</span> </div> <div class="aui-info-item">2015-07-14 10:31</div> </div> </li> <li class="aui-list-item"> <div class="aui-media-list-item-inner"> <div class="aui-list-item-media"> <img src="../../image/demo1.png"> </div> <div class="aui-list-item-inner"> <div class="aui-list-item-text"> <div class="aui-list-item-title">带有媒体的列表二</div> <div class="aui-list-item-right">08:00</div> </div> <div class="aui-list-item-text"> 这里是内容区域，新版中的列表布局可以很轻松的帮助开发者完成常见列表样式。 </div> <div class="aui-info aui-margin-t-5" style="padding:0"> <div class="aui-info-item"> <img src="../../image/liulangnan.png" style="width:1rem" class="aui-img-round" /><span class="aui-margin-l-5">流浪男</span> </div> <div class="aui-info-item">2015-07-14 10:31</div> </div> </div> </div> </li> <li class="aui-list-item"> <div class="aui-media-list-item-inner"> <div class="aui-list-item-inner"> <div class="aui-list-item-title">媒体项右侧显示</div> <div class="aui-list-item-text"> 这里是内容区域，新版中的列表布局可以很轻松的帮助开发者完成常见列表样式。 </div> </div> <div class="aui-list-item-media"> <img src="../../image/demo4.png"> </div> </div> </li> </ul> </div> <div class="aui-content aui-margin-b-15"> <ul class="aui-list aui-media-list"> <li class="aui-list-item"> <div class="aui-list-item-inner"> <div class="aui-list-item-title">多张图片列表一</div> <p>借助栅格来实现图片列表</p> <div class="aui-row aui-row-padded"> <div class="aui-col-xs-4"> <img src="../../image/demo1.png"/> </div> <div class="aui-col-xs-4"> <img src="../../image/demo2.png" /> </div> <div class="aui-col-xs-4"> <img src="../../image/demo3.png" /> </div> </div> </div> </li> <li class="aui-list-item"> <div class="aui-list-item-inner"> <div class="aui-list-item-title">多张图片列表一</div> <p>借助栅格来实现图片列表</p> <div class="aui-row aui-row-padded"> <div class="aui-col-xs-4"> <img src="../../image/demo1.png"/> </div> <div class="aui-col-xs-4"> <img src="../../image/demo2.png" /> </div> <div class="aui-col-xs-4"> <img src="../../image/demo3.png" /> </div> <div class="aui-col-xs-4"> <img src="../../image/demo1.png" /> </div> <div class="aui-col-xs-4"> <img src="../../image/demo2.png" /> </div> <div class="aui-col-xs-4"> <img src="../../image/demo3.png" /> </div> </div> </div> </li> </ul> </div> <div class="aui-content aui-margin-b-15"> <ul class="aui-list aui-media-list"> <li class="aui-list-header"> 通讯录样式列表 </li> <li class="aui-list-item aui-list-item-middle"> <div class="aui-media-list-item-inner"> <div class="aui-list-item-media" style="width: 3rem;"> <img src="../../image/demo5.png" class="aui-img-round aui-list-img-sm"> </div> <div class="aui-list-item-inner aui-list-item-arrow"> <div class="aui-list-item-text"> <div class="aui-list-item-title aui-font-size-14">AUI</div> <div class="aui-list-item-right">08:00</div> </div> <div class="aui-list-item-text"> www.auicss.com </div> </div> </div> </li> <li class="aui-list-item aui-list-item-middle"> <div class="aui-media-list-item-inner"> <div class="aui-list-item-media" style="width: 3rem;"> <img src="../../image/liulangnan.png" class="aui-img-round aui-list-img-sm"> </div> <div class="aui-list-item-inner aui-list-item-arrow"> 流浪男 </div> </div> </li> </ul> </div>