三栏页面布局方式

假设高度已知，请写出三栏布局，其中左兰、右栏宽度各为300px，中间自适应。

1、浮动

2、绝对定位

3、flexbox

4、表格布局

5、网格布局 grid

1、浮动

<!DOCTYPE html>
<html lang="en">
　　<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>layout</title>
　　　　<style media="screen">
　　　　　　html *{
　　　　　　　　padding: 0;
　　　　　　　　margin: 0;
　　　　　　}
　　　　　　.layout article div{
　　　　　　　　min-height: 100px;
　　　　　　}
　　　　</style>
　　</head>
　　<body>
　　　　<section class="layout float">
　　　　　　<style media="screen">
　　　　　　　　.layout.float .left {
　　　　　　　　　　float: left;
　　　　　　　　　　width: 300px;
　　　　　　　　　　background: red;
　　　　　　　　}
　　　　　　　　.layout.float .right{
　　　　　　　　　　float: right;
　　　　　　　　　　width: 300px;
　　　　　　　　　　background: blue;
　　　　　　　　}
　　　　　　　　.layout.float .center{
　　　　　　　　　　background: yellow;
　　　　　　　　}
　　　　　　</style>
　　　　　　<article class="left-right-center">
　　　　　　　　<div class="left"></div>
　　　　　　　　<div class="right"></div>
　　　　　　　　<div class="center">
　　　　　　　　　　<h1>浮动解决方案</h1>
　　　　　　　　</div>
　　　　　　</article>
　　　　</section>
　　</body>
</html>

2、绝对定位

<!DOCTYPE html>
<html lang="en">
　　<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>layout</title>
　　　　<style media="screen">
　　　　　　html *{
　　　　　　　　padding: 0;
　　　　　　　　margin: 0;
　　　　　　}
　　　　　　.layout article div{
　　　　　　　　min-height: 100px;
　　　　　　}
　　　　</style>
　　</head>
　　<body>
　　　　<section class="layout absolute">
　　　　　　<style>
　　　　　　　　.layout.absolute .left-center-right>div{
　　　　　　　　　　position: absolute;
　　　　　　　　}
　　　　　　　　.layout.absolute .left{
　　　　　　　　　　width: 300px;
　　　　　　　　　　left:0;
　　　　　　　　　　background: red
　　　　　　　　}
　　　　　　　　.layout.absolute .center{
　　　　　　　　　　left: 300px;
　　　　　　　　　　right: 300px;
　　　　　　　　　　background: yellow;
　　　　　　　　}
　　　　　　　　.layout.absolute .right{
　　　　　　　　　　width: 300px;
　　　　　　　　　　right: 0;
　　　　　　　　　　background: blue;
　　　　　　　　}
　　　　　　</style>
　　　　　　<article class="left-center-right">
　　　　　　　　<div class="left"></div>
　　　　　　　　<div class="center">
　　　　　　　　　　<h2>绝对定位</h2>
　　　　　　　　</div>
　　　　　　　　<div class="right"></div>
　　　　　　</article>
　　　　</section>
</body>
</html>

3、flexbox

<!DOCTYPE html>
<html lang="en">
　　<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>layout</title>
　　　　<style media="screen">
　　　　　　html *{
　　　　　　　　padding: 0;
　　　　　　　　margin: 0;
　　　　　　}
　　　　　　.layout article div{
　　　　　　　　min-height: 100px;
　　　　　　}
　　　　</style>
　　</head>
　　<body>
　　　　<section class="layout flexbox">
　　　　　　<style>
　　　　　　　　.layout.flexbox .left-center-right{
　　　　　　　　　　display: flex;
　　　　　　　　}
　　　　　　　　.layout.flexbox .left{
　　　　　　　　　　width: 300px;
　　　　　　　　　　background: red;
　　　　　　　　}
　　　　　　　　.layout.flexbox .center{
　　　　　　　　　　flex: 1;
　　　　　　　　　　background: yellow;
　　　　　　　　}
　　　　　　　　.layout.flexbox .right{
　　　　　　　　　　width: 300px;
　　　　　　　　　　background: blue;
　　　　　　　　}
　　　　　　</style>
　　　　　　<article class="left-center-right">
　　　　　　　　<div class="left"></div>
　　　　　　　　<div class="center">
　　　　　　　　　　<h2>flexbox</h2>
　　　　　　　　</div>
　　　　　　　　<div class="right"></div>
　　　　　　</article>
　　　　</section>
　　</body>
</html>

4、表格布局

<!DOCTYPE html>
<html lang="en">
　　<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>layout</title>
　　　　<style media="screen">
　　　　　　html *{
　　　　　　　　padding: 0;
　　　　　　　　margin: 0;
　　　　　　}
　　　　　　.layout article div{
　　　　　　　　min-height: 100px;
　　　　　　}
　　　　</style>
　　</head>
　　<body>
　　　　<section class="layout table">
　　　　　　<style>
　　　　　　　　.layout.table .left-center-right {
　　　　　　　　　　width: 100%;
　　　　　　　　　　display: table;
　　　　　　　　　　height: 100px;
　　　　　　　　}
　　　　　　　　.layout.table .left-center-right>div {
　　　　　　　　　　display: table-cell;
　　　　　　　　}
　　　　　　　　.layout.table .left {
　　　　　　　　　　width: 300px;
　　　　　　　　　　background: red;
　　　　　　　　}
　　　　　　　　.layout.table .center {
　　　　　　　　　　background: yellow;
　　　　　　　　}
　　　　　　　　.layout.table .right {
　　　　　　　　　　width: 300px;
　　　　　　　　　　background: blue;
　　　　　　　　}
　　　　　　</style>
　　　　　　<article class="left-center-right">
　　　　　　　　<div class="left"></div>
　　　　　　　　<div class="center">
　　　　　　　　　　<h2>表格布局</h2>
　　　　　　　　</div>
　　　　　　　　<div class="right"></div>
　　　　　　</article>
　　　　</section>
　　</body>
</html>

5、网格布局 grid

<!DOCTYPE html>
<html lang="en">
　　<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>layout</title>
　　　　<style media="screen">
　　　　　　html *{
　　　　　　　　padding: 0;
　　　　　　　　margin: 0;
　　　　　　}
　　　　　　.layout article div{
　　　　　　　　min-height: 100px;
　　　　　　}
　　　　</style>
　　</head>
　　<body>
　　　　<section class="layout grid">
　　　　　　<style>
　　　　　　　　.layout.grid .left-center-right{
　　　　　　　　　　display: grid;
　　　　　　　　　　width: 100%;
　　　　　　　　　　grid-template-rows: 100px;
　　　　　　　　　　grid-template-columns: 300px auto 300px
　　　　　　　　}
　　　　　　　　.layout.grid .left{
　　　　　　　　　　background: red;
　　　　　　　　}
　　　　　　　　.layout.grid .center{
　　　　　　　　　　background: yellow;
　　　　　　　　}
　　　　　　　　.layout.grid .right{
　　　　　　　　　　background: blue;
　　　　　　　　}
　　　　　　</style>
　　　　　　<article class="left-center-right">
　　　　　　　　<div class="left"></div>
　　　　　　　　<div class="center">
　　　　　　　　　　<h2>网格布局</h2>
　　　　　　　　</div>
　　　　　　　　<div class="right"></div>
　　　　　　</article>
　　　　</section>
　　</body>
</html>

三栏页面布局方式

猜你喜欢