JSFiddle - React, Tailwind, and code Playground

by zwwill

HTML

圣杯布局
<header>header</header>
<section class="wrapper">
    <section class="col main">main</section>
    <aside class="col left">left</aside>
    <aside class="col right">right</aside>
</section>
<footer>footer</footer>

CSS

.wrapper {padding: 0 100px 0 100px; color:#fff; overflow:hidden;}
.col{position: relative;float: left;}
header {height: 50px;background-color: #666;color:#fff;}
.main {width: 100%;height: 200px;background-color: #555;}
.left {width: 100px;height: 200px;margin-left: -100%;left: -100px;background-color: #999;}
.right {width: 100px;height: 200px;margin-left: -100px;right: -100px;background-color: #999;}
footer {height: 50px;background-color: #666; color:#fff;}
.clearfix::after{content: "";display:block;clear:both;visibility:hidden;height:0;overflow:hidden;}