<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>常用三栏布局
</title>
<style type="text/css">
html * {
margin: 0;
padding: 0;
}
.layout article>div {
height: 100px;
}
.layout .left {
width: 100px;
background: red;
}
.layout .right {
width: 200px;
background: blue;
}
.layout .center {
background: green;
}
</style>
</head>
<body>
<section class="layout float">
<style type="text/css">
.layout.float .left {
float: left;
}
.layout.float .right {
float: right;
}
</style>
<h1>浮动布局
</h1>
<article>
<div class="left"></div>
<div class="right"></div>
<div class="center">
浮动布局解决方案 浮动布局解决方案 浮动布局解决方案
</div>
</article>
</section>
<section class="layout absolute">
<style type="text/css">
.layout.absolute article>div {
position: absolute;
}
.layout.absolute .left {
left: 0;
}
.layout.absolute .right {
right: 0;
}
.layout.absolute .center {
left: 100px;
right: 200px;
}
</style>
<h1>定位布局
</h1>
<article>
<div class="left"></div>
<div class="right"></div>
<div class="center">
定位布局解决方案 定位布局解决方案 定位布局解决方案
</div>
</article>
</section>
<section class="layout flex">
<style type="text/css">
.layout.flex {
margin-top: 100px;
}
.layout.flex article {
display: flex;
}
.layout.flex .center {
flex: 1;
}
</style>
<h1>弹性布局
</h1>
<article>
<div class="left"></div>
<div class="center">
弹性布局解决方案 弹性布局解决方案 弹性布局解决方案
</div>
<div class="right"></div>
</article>
</section>
<section class="layout table">
<style type="text/css">
.layout.table article {
display: table;
width: 100%;
}
.layout.table article>div {
display: table-cell;
}
</style>
<h1>表格布局
</h1>
<article>
<div class="left"></div>
<div class="center">
表格布局解决方案 表格布局解决方案 表格布局解决方案
</div>
<div class="right"></div>
</article>
</section>
<section class="layout grid">
<style type="text/css">
.layout.grid article {
display: grid;
grid-template-columns: 100px auto 200px;
}
</style>
<h1>网格布局
</h1>
<article>
<div class="left"></div>
<div class="center">
网格布局解决方案 网格布局解决方案 网格布局解决方案
</div>
<div class="right"></div>
</article>
</section>
<section class="layout wing">
<style type="text/css">
.layout.wing article>div{
float: left;
}
.layout.wing .center{
width: 100%;
}
.layout.wing .main{
margin-left: 100px;
margin-right: 200px;
}
.layout.wing .left{
margin-left: -100%;
}
.layout.wing .right{
margin-left: -200px;
}
</style>
<h1>双飞翼布局
</h1>
<article>
<div class="center">
<div class="main"> 双飞翼布局解决方案 双飞翼布局解决方案 双飞翼布局解决方案
</div>
</div>
<div class="left"></div>
<div class="right"></div>
</article>
</section>
<section class="layout grial">
<style type="text/css">
.layout.grial article{
margin-left: 100px;
margin-right: 200px;
}
.layout.grial article>div{
position: relative;
float: left;
}
.layout.grial .center{
width: 100%;
}
.layout.grial .left{
margin-left: -100%;
left: -100px;
}
.layout.grial .right{
margin-left: -200px;
right: -200px;
}
</style>
<h1>圣杯布局
</h1>
<article>
<div class="center">
圣杯布局解决方案 圣杯布局解决方案 圣杯布局解决方案
</div>
<div class="left"></div>
<div class="right"></div>
</article>
</section>
</body>
</html>
