1、这道题的主要目的是考察基本功,前面两种方法float和absolute基本功,后面三个flex布局、table布局、grid布局属于拔高。
效果图如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>布局的格式</title>
<style>
html * {
margin: 0;
padding: 0;
}
.layout {
margin-top: 20px;
}
.layout article div {
min-height: 100px;
}
.layout article .left,
.layout article .right {
width: 300px;
}
</style>
</head>
<body>
<!--
float布局
-->
<section class="layout float">
<style>
.layout.float .left {
float: left;
background: red;
}
.layout.float .right {
float: right;
background: blue;
}
.layout.float .center {
background: yellow;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
1、我是float布局的中间部分 2、我是float布局的中间部分 3、我是float布局的中间部分
</div>
</article>
</section>
<!--
absolute布局
-->
<section class="layout absolute">
<style>
.layout.absolute .left-right-center>div {
position: absolute;
}
.layout.absolute .left {
left: 0;
background: red;
}
.layout.absolute .right {
right: 0;
background: blue;
}
.layout.absolute .center {
left: 300px;
right: 300px;
background: yellow;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="right"></div>
<div class="center">
1、我是absolute布局的中间部分 2、我是absolute布局的中间部分 3、我是absolute布局的中间部分
</div>
</article>
</section>
<!--
flex布局
-->
<section class="layout flexbox">
<style>
.layout.flexbox {
margin-top: 140px;
}
.layout.flexbox .left-right-center {
display: flex;
height: 100px;
}
.layout.flexbox .left {
background: red;
}
.layout.flexbox .center {
flex: 1;
background: yellow;
}
.layout.flexbox .right {
background: blue;
}
</style>
<article class="left-right-center">
<div class="left"></div>
<div class="center">
1、我是flexbox布局的中间部分 2、我是flexbox布局的中间部分 3、我是flexbox布局的中间部分
</div>
<div class="right"></div>
</article>
</section>
<!--
table布局
-->
<section class="layout tablebox">
<style>
.layout.tablebox {
display: table;
width: 100%;
height: 100px;
}
.layout.tablebox .left-center-right {
display: table-row
}
.layout.tablebox .left-center-right>div {
display: table-cell
}
.layout.tablebox .left {
background: red;
}
.layout.tablebox .center {
background: yellow;
}
.layout.tablebox .right {
background: blue;
}
</style>
<article class="left-center-right">
<div class="left"></div>
<div class="center">
1、我是table布局的中间部分 2、我是table布局的中间部分 3、我是table布局的中间部分
</div>
<div class="right"></div>
</article>
</section>
<!--
grid布局
-->
<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">
1、我是grid布局的中间部分 2、我是grid布局的中间部分 3、我是grid布局的中间部分
</div>
<div class="right"></div>
</article>
</section>
</body>
</html>