<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>threelayout</title>
<style media="screen">
*{
margin:0;
padding:0;
}
.layout{
margin-top:30px;
}
.layout.float>div{
height: 100px;
}
.layout.float>div.left{
float: left;
width: 300px;
background-color: red;
}
.layout.float>div.right{
float: right;
width:300px;
background-color: royalblue;
}
.layout.float>div.center{
background-color: seagreen;
}
.layout.flex{
display: flex;
}
.layout.flex>div{
height: 100px;
}
.layout.flex>div.left{
width:300px;
background-color: seagreen;
}
.layout.flex>div.center{
flex: 1;
background-color: red;
}
.layout.flex>div.right{
width: 300px;
background-color: sienna;
}
.layout.absolute>div{
height: 100px;
position: absolute;
}
.layout.absolute>div.left{
left: 0;
background-color: red;
width: 300px;
}
.layout.absolute>div.right{
right:0;
background-color: royalblue;
width: 300px;
}
.layout.absolute>div.center{
background-color: teal;
left: 300px;
right: 300px;
}
.layout.grid{
display: grid;
grid-template-columns: 300px auto 300px;
grid-template-rows: 100px;
margin-top: 200px;
}
.layout.grid>.left{
background-color: teal;
}
.layout.grid>.right{
background-color: violet;
}
.layout.grid>.center{
background-color: yellow;
}
.layout.table{
width: 100%;
height: 100px;
display: table;
}
.layout.table>div{
display: table-cell;
/* //表格單元格 */
}
.layout.table>.left{
width: 300px;
background-color: yellowgreen;
}
.layout.table>.center{
background-color: violet;
}
.layout.table>.right{
width: 300px;
background-color:tomato;
}
</style>
</head>
<body>
<section>
<article class="layout float">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<p>
這是三欄浮動佈局
</p>
</div>
</article>
</section>
<section>
<article class="layout flex">
<div class="left"></div>
<div class="center">
<p>
這是三欄flex佈局
</p>
</div>
<div class="right"></div>
</article>
</section>
<section>
<article class="layout absolute">
<div class="left"></div>
<div class="center">
<p>
這是三欄絕對定位佈局
</p>
</div>
<div class="right"></div>
</article>
</section>
<section>
<article class="layout grid">
<div class="left"></div>
<div class="center">
<p>
這是網格三欄佈局
</p>
</div>
<div class="right"></div>
</article>
</section>
<section>
<article class="layout table">
<div class="left"></div>
<div class="center">
<p>
這是表格三欄佈局
</p>
</div>
<div class="right"></div>
</article>
</section>
</body>
</html>
