card 组件的构建方案
2018-05-25 本文已影响0人
14px
初步要求：
- pic + main + side + fn
- 默认横排，加参数竖排
其实还有个隐藏需求，以后要兼容 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>
