<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
html,body{width: 100%;height:100%;color:#fff;font-size:28px;}
.box{height:500px;display:flex;flex-direction:column; width:700px;margin:0 auto;}
.a{height:100px;background: #000;line-height: 100px;text-align: center;}
.b{flex:1;background: #f40;text-align: center;}
.c{height:100px;background: #ccc;line-height: 100px;text-align: center;}
.b{display: flex;}
.a1{width:100px;background: pink;line-height: 300px;text-align: center;}
.b1{flex:1;background: #00f;line-height: 300px;}
.c1{width:100px;background: #0f0;line-height: 300px;text-align: center;}
</style>
</head>
<body>
<div class="box">
<div class="a">header</div>
<div class="b">
<div class="a1">left</div>
<div class="b1">middle</div>
<div class="c1">right</div>
</div>
<div class="c">footer</div>
</div>
</body>
</html>
09-11
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
