折叠式卡片布局在PC版网站中可能不常见，但是在手机版，小屏幕的网页浏览会大发异彩。

AmazeUI也提供了折叠式卡片布局，虽然官网上有例子，但是这种折叠式卡片布局，整合内容列表、表格组件还是需要一番功夫。

比如如下图，利用AmazeUI的折叠式卡片布局，整合其提供的内容列表与表格组件。

整个页面的代码如下：

折叠式卡片布局
卡片1-文字
 纯属文字 
卡片2-内容列表
标题12015-05-12
超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长标题22015-05-12
标题32015-05-12
卡片3-表格
表头1
表头2
表头3
内容1
超长超长超长内容2
内容3
内容1
超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长超长内容2
内容3
内容1
超长超长超长内容2
内容3

关键的地方，注释都有注释了。也提供了超长内容的处理方式。

dl-dt-dd是HTML中原生态的列表布局，与ul-li这一组是一样地位，但是用得少，可能给人淡忘了。

如果AmazeUI的折叠式卡片布局里面要整合组件，必须移除底部那20px的留白，否则很难看的。感觉这个组件专门为文字设置的，框架的原义不希望你整合东西。

同时表格注意设置好第一行的各个宽度，以规定好各行。

到此这篇关于AmazeUI折叠式卡片布局，整合内容列表、表格组件实现的文章就介绍到这了,更多相关AmazeUI折叠式卡片布局内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！ 

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！