图片排列效果

.aui-list-view.aui-thumb-view来结合使用,同时借助栅格系统完成图片的排列。使用栅格系统可以决定一行显示图片数量

  1. <div class="aui-content">
  2. <ul class="aui-list-view aui-thumb-view">
  3. <li class="aui-list-view-cell aui-img aui-col-xs-4">
  4. <img class="aui-img-object" src="../image/demo3.png">
  5. </li>
  6. </ul>
  7. </div>

图片+下方文字排列

.aui-list-view.aui-grid-view来结合使用,同样也是需要结合栅格系统

  1. <div class="aui-content">
  2. <ul class="aui-list-view aui-grid-view">
  3. <li class="aui-list-view-cell aui-img aui-col-xs-6">
  4. <img class="aui-img-object" src="../image/demo4.png">
  5. <div class="aui-img-body">
  6. 图文列表
  7. </div>
  8. </li>
  9. </ul>
  10. </div>