card 组件的构建方案

初步要求:

  1. pic + main + side + fn
  2. 默认横排,加参数竖排

其实还有个隐藏需求,以后要兼容 IE8 的。

选择了使用 display:table,而非 display:flex
原因是我需要一整个块作为 link 的时候,flex 会很尴尬,grid 我还不会用,兼容性大概也好不到哪里去。

代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
    * { margin:0; padding:0; list-style:none;}
    .c_card { display:table; width:100%; border-collapse:collapse;}
    .c_card > .fn { padding:20px; color:#fff; display:table-cell; vertical-align:middle;}
    .c_card > .fn { width:5em; }
    .c_card > .main { padding:20px; display:table-cell; vertical-align:middle;}
    .c_card > .side { padding:20px; display:table-cell; vertical-align:middle; text-align:right; width:1px; white-space:nowrap;}
</style>
</head>
<body>
    <div class="c_card">
        <div class="main" style="background:#f60;">
            壹壹壹壹壹壹壹壹壹壹壹壹壹壹壹壹壹壹
        </div>
        <div class="side" style="background:#fc0;">
            贰贰贰贰贰贰贰贰
        </div>
        <div class="fn" style="background:#f90;">
            叁叁
        </div>
    </div>
</body>
</html>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容