三栏页面布局方式

时间：2018-12-15 11:49:00 阅读：169 评论：0 收藏：0 [点我收藏+]

标签：device div str 布局 layout doc pos flexbox 绝对定位

假设高度已知，请写出三栏布局，其中左兰、右栏宽度各为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>

三栏页面布局方式

标签：device div str 布局 layout doc pos flexbox 绝对定位

原文地址：https://www.cnblogs.com/wzndkj/p/10122607.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行