三栏布局
左右固定、中间自适应
流体布局
左侧和右侧固定宽度,中间自适应
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
</div>
.left {
background-color: red;
float: left;
width: 100px;
height: 200px;
}
.center {
background-color: orange;
margin-left: 100px;
margin-right: 100px;
height: 200px;
}
.right {
background-color: blue;
float: right;
width: 100px;
height: 200px;
}

BFC布局
利用BFC,左右固定,中间自适应
<div class="left"></div>
<div class="right"></div>
<div class="center"></div>
<style>
.left {
float: left;
width: 200px;
background-color: orange;
height: 200px;
}
.right {
float: right;
width: 200px;
background-color: red;
height: 200px;
}
.center {
overflow: hidden;
background-color: greenyellow;
height: 200px;
}
</style>

圣杯布局
<div class="container">
<div class="center"></div>
<div class="left "></div>
<div class="right "></div>
<div style="clear: both;"></div>
</div>
<style>
.container {
padding-left: 200px;
padding-right: 200px;
min-width: 600px;
}
.left {
float: left;
height: 200px;
width: 200px;
background-color: orange;
position: relative;
margin-left: -100%;
left: -200px;
}
.right {
float: left;
height: 200px;
width: 200px;
background-color: orangered;
margin-right: -200px;
}
.center {
float: left;
height: 200px;
width: 100%;
background-color: greenyellow;
}
</style>

双飞翼布局
<div class="container">
<div class="center"></div>
</div>
<div class="left"></div>
<div class="right"></div>
body{
min-width: 400px;
}
.container {
float: left;
width: 100%;
}
.center {
margin-left: 200px;
margin-right: 200px;
height: 200px;
background-color: orchid;
}
.left {
float: left;
width: 200px;
height: 200px;
background-color: orangered;
margin-left: -100%;
}
.right {
float: left;
width: 200px;
height: 200px;
background-color: greenyellow;
margin-left: -200px;
}

使用Flex弹性盒子
<div class="container">
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
</div>
<style>
.container{
display: flex;
}
.center{
flex-grow: 1;
height: 200px;
background-color: greenyellow;
}
.left{
order: -1;
flex: 0 0 200px;
height: 200px;
background-color: grey;
}
.right{
flex: 0 0 200px;
height: 200px;
background-color: hotpink;
}
</style>
使用定位布局
<div class="container">
<div class="left"></div>
<div class="center"></div>
<div class="right"></div>
</div>
<style>
.container {
position: relative;
}
.left {
position: absolute;
background-color: hotpink;
width: 200px;
height: 200px;
top: 0;
left: 0;
}
.center {
margin: auto 200px auto 200px;
background-color: indigo;
height: 200px;
}
.right {
position: absolute;
background-color: lawngreen;
width: 200px;
height: 200px;
top: 0;
right: 0;
}
</style>
网格Grid布局
<div class="container">
<div style="background-color: lawngreen;"></div>
<div style="background-color: lightblue;"></div>
<div style="background-color: lightcoral;"></div>
</div>
<style>
.container{
display: grid;
grid-template-columns: 200px auto 200px;
grid-template-rows: 200px;
}
</style>
使用calc属性
<div class="center"></div>
<div class="left"></div>
<div class="right"></div>
.left {
float: left;
background-color: lightskyblue;
height: 200px;
width: 200px;
margin-left: -100%;
}
.right {
float: left;
background-color: lightgreen;
height: 200px;
width: 200px;
margin-left: -200px;
}
.center {
float: left;
background-color: lightcoral;
height: 200px;
margin: auto 200px auto 200px;
width: calc(100% - 400px);
}
本文详细介绍了响应式布局的各种实现方式,包括三栏布局、左右固定中间自适应、流体布局、BFC布局、圣杯布局、双飞翼布局、Flex弹性盒子以及Grid网格布局。通过这些布局方式,可以灵活适应不同屏幕尺寸,创建出适应性强的网页设计。

被折叠的 条评论
为什么被折叠?



