<!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>Document</title>
<style>
html * {
margin: 0;
padding: 0;
}
div {
min-height: 100px;
text-align: center;
}
.mt20 {
margin-top: 20px;
}
.layout .left {
float: left;
background: yellow;
width: 300px;
}
.layout .right {
float: right;
width: 300px;
background: blue;
}
.layout .center {
background: red;
}
.absolute .left {
position: absolute;
width: 300px;
background: yellow;
left: 0px;
}
.absolute .right {
position: absolute;
width: 300px;
background: blue;
right: 0px;
}
.absolute .center {
margin: 0 300px;
background: red;
}
.flexbox {
display: flex;
}
.flexbox .left {
width: 300px;
background: yellow;
}
.flexbox .right {
width: 300px;
background: blue;
}
.flexbox .center {
background: red;
flex: 1;
}
.table {
display: table;
width: 100%;
height: 100px;
}
.table div {
display: table-cell;
}
.table .left {
width: 300px;
background: yellow;
}
.table .right {
width: 300px;
background: blue;
}
.table .center {
background: red;
}
.grid {
display: grid;
width: 100%;
grid-template-rows: 100px;
grid-template-columns: 300px auto 300px;
/*三个值代表三列第一列300px 中间自适用 右边300px 每列宽*/
}
.grid .left {
background: yellow;
}
.grid .right {
background: blue;
}
.grid .center {
background: red;
}
</style>
<body>
<section class="layout">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>浮动方案</h1>
</div>
</section>
<section class="absolute mt20">
<div class="left"></div>
<div class="right"></div>
<div class="center">
<h1>绝对定位方案</h1>
</div>
</section>
<section class="flexbox mt20">
<div class="left"></div>
<div class="center">
<h1>flex布局方案</h1>
</div>
<div class="right"></div>
</section>
<section class="table mt20">
<div class="left"></div>
<div class="center">
<h1>table布局方案</h1>
</div>
<div class="right"></div>
</section>
<section class="grid mt20">
<div class="left"></div>
<div class="center">
<h1>grid布局方案</h1>
</div>
<div class="right"></div>
</section>
</body>
</html>
原文地址：https://www.cnblogs.com/Xuman0927/p/12057040.html
时间： 2024-10-07 09:43:23