JSFiddle - React, Tailwind, and code Playground

by zwwill

HTML

双飞翼布局
<header>header</header>
<section class="wrapper">
    <section class="col main">
        <section class="main-wrap">main</section>
    </section>
    <aside class="col left">left</aside>
    <aside class="col right">right</aside>
</section>
<footer>footer</footer>

CSS

.wrapper {color:#fff;overflow:hidden;}
.col {float: left;}
header {height: 50px;background-color: #666;color:#fff;}
.main {width: 100%;background-color: #555;}
.main-wrap {margin: 0 100px 0 100px;height: 200px;}
.left {width: 100px;height: 200px;margin-left: -100%;background-color: #999;}
.right {width: 100px;height: 200px;margin-left: -100px;background-color: #999;}
footer {height: 50px;background-color: #666;color:#fff;}