列表元素 - 图文混排基础能力
建议你先快速浏览一次本页面中所有demo,以了解混排基础能力
每个列表项目的class必须使用 .ks-media

一个列表项目通常由标题、图片、摘要、其他扩展信息组成

我们给不同的元素分配了不同的class,具体如下:

标题ks-media-title
图片ks-media-img
摘要ks-media-text

它们必须在同一个父级class.ks-media下才能生效,如:

<div class="ks-media">
    <div class="ks-media-img">图片</div>
    <div class="ks-media-title">标题</div>
    <div class="ks-media-text">摘要内容</div>
</div>
上下结构(默认)
根据情况适当调整大小
图片在左右

你只需给.ks-media-img 附加 ks-fl(左浮动) 或 ks-fr(右浮动)

只要存在ks-fl or ks-fr时,框架会自动处理。你不能直接给浮动属性

左右结构时,图片另外一侧的所有行必须用一个标签包裹起来

图片标签所在顺序必须处于第一个

PC常用文章列表
史蒂夫·乔布斯(Steve Jobes)
史蒂夫·乔布斯(Steve Jobs,1955年2月24日—2011年10月5日),出生于美国加利福尼亚州旧金山,美国发明家、企业家、美国苹果公司联合创始人
乔布斯被认为是计算机业界与娱乐业界的标志性人物,他经历了苹果公司几十年的起落与兴衰,先后领导和推出了麦金塔计算机(Macintosh)、iMac、iPod、iPhone、iPad等风靡全球的电子产品,深刻地改变了现代通讯、娱乐、生活方式。乔布斯同时也是前Pixar动画公司的董事长及行政总裁。
3543 3254 2020-01-01 01:01:01
史蒂夫·乔布斯(Steve Jobes)
Apple Computer Inc. 企业家 发明家 互联网颠覆者
史蒂夫·乔布斯(Steve Jobs,1955年2月24日—2011年10月5日),出生于美国加利福尼亚州旧金山,美国发明家、企业家、美国苹果公司联合创始人
乔布斯被认为是计算机业界与娱乐业界的标志性人物,他经历了苹果公司几十年的起落与兴衰,先后领导和推出了麦金塔计算机(Macintosh)、iMac、iPod、iPhone、iPad等风靡全球的电子产品,深刻地改变了现代通讯、娱乐、生活方式。乔布斯同时也是前Pixar动画公司的董事长及行政总裁。
3543 | 3254 2020-01-01 01:01:01
横排 - 简单
文字标题
文字标题
文字标题
文字标题
资料卡片 - 普通
史蒂夫·乔布斯(Steve Jobes)
计算机业界与娱乐业界的标志性人物
原创 1160万 粉丝 11612万 获赞 5542万
史蒂夫·乔布斯(Steve Jobes)
计算机业界与娱乐业界的标志性人物
商品列表
华为P40 2020年3月上市
参考价¥4488.00
华为P40 2020年3月上市
参考价¥4488.00
拍照效果不错,值得购买的一款拍照手机,颜值高,手感不错,适合日常使用,麒麟990 5G处理器5G网络快,性能强,高端旗舰水准
包邮 次日达 运费险
6.1英寸 麒麟990 5G 3800mAh
华为P40

6GB

内存

128GB

机身储存

6.1英寸

屏幕尺寸

参考价¥4488.00
包邮 次日达 运费险
拍照效果不错,值得购买的一款拍照手机,颜值高,手感不错,适合日常使用,麒麟990 5G处理器5G网络快,性能强,高端旗舰水准
700+条评价 95%好评
华为P40
参考价¥4488.00 ¥4488.00
包邮 次日达 运费险
拍照效果不错,值得购买的一款拍照手机,颜值高,手感不错,适合日常使用,麒麟990 5G处理器5G网络快,性能强,高端旗舰水准
6.1英寸 麒麟990 5G 3800mAh