多栏布局方案、三栏自适应布局、等高布局
一、多栏布局方案
pc端多栏布局: 宽度自适应布局
1、两栏自适应布局
两栏自适应布局分为:
- 左侧宽度固定,右侧宽度自适应
- 右侧宽度固定,左侧宽度自适应
左侧宽度固定,右侧宽度自适应为例,技术原理如下:
- 左侧盒子设置固定的宽度(绝对单位),右侧盒子设置宽度100%;
- 左侧盒子设置绝对定位
- 给右侧盒子添加一个子盒,并且子盒设置padding-left:左侧盒子的宽度
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* - 左侧盒子设置固定的宽度(绝对单位),右侧盒子设置宽度100%;
- 左侧盒子设置绝对定位
- 给右侧盒子添加一个子盒,并且子盒设置padding-left:左侧盒子的宽度
*/
.left {
position: absolute;
width: 300px;
min-height: 200px;
background: aqua;
}
.right {
width: 100%;
min-height: 200px;
background-color: pink;
}
.right>.son {
padding-left: 300px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="left">左侧盒子中的内容</div>
<div class="right">
<div class="son">右侧盒子中的内容</div>
</div>
</div>
</body>
</html>
2、三栏自适应布局
左侧盒子和右侧盒子固定宽度,让中间盒子宽度自适应
(1)圣杯布局
技术原理
-
结构上先放中间盒子,再放左盒和右盒
-
左侧盒子和右侧盒子给定固定宽度(px),中间盒子设置
width:100%
; -
给左侧、右侧、中间三个盒子设置浮动(注意给父元素清浮动)
-
将左侧盒子拉到父元素的最左边(margin-left:-100%),将右侧盒子拉到父元素的最右边(margin-left:-右侧盒子的宽度)
-
将中间盒子的内容露出来(给三个盒子的父盒设置padding:0 右侧盒子的宽度 0 左侧盒子的宽度)
-
将左侧归位(微调元素位置,相对定位,left:-左侧盒子宽度)、右侧盒子归位(微调元素位置,相对定位,right:-右侧盒子宽度)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
- 结构上先放中间盒子,再放左盒和右盒
- 左侧盒子和右侧盒子给定固定宽度(px),中间盒子设置`width:100%`;
- 给左侧、右侧、中间三个盒子设置浮动(注意给父元素清浮动)
- 将左侧盒子拉到父元素的最左边,将右侧盒子拉到父元素的最右边
- 将中间盒子的内容露出来(给三个盒子的父盒设置padding:0 右侧盒子的宽度 0 左侧盒子的宽度)
- 将左侧归位(微调元素位置,相对定位,left:-自身宽度)、右侧盒子归位(微调元素位置,相对定位,right:-自身宽度)
*/
.wrap {
padding: 0 200px 0 300px;
}
.left {
position: relative;
left: -300px;
float: left;
width: 300px;
min-height: 300px;
background-color: aqua;
margin-left: -100%;
}
.right {
position: relative;
right: -200px;
float: left;
width: 200px;
min-height: 300px;
background-color: pink;
margin-left: -200px;
}
.center {
float: left;
width: 100%;
min-height: 300px;
background: yellow;
}
</style>
</head>
<body>
<div class="wrap">
<div class="center">中间盒子的内容</div>
<div class="left">左侧盒子的内容</div>
<div class="right">右侧盒子的内容</div>
</div>
</body>
</html>
(2)双飞翼布局
始于淘宝UED团队
技术原理:
-
结构上先放中间盒子(中间盒子需要有子盒),再放左侧和右侧盒子
-
左侧盒子和右侧盒子给定固定宽度(px),中间盒子设置
width:100%
; -
给左侧、右侧、中间三个盒子设置浮动(注意给父元素清浮动)
-
将左侧盒子拉到父元素的最左边(
margin-left:-100%
),将右侧盒子拉到父元素的最右边(margin-left:-右侧盒子的宽度
) -
将中间盒子露出来(给中间盒子的子盒设置
margin:0 右侧盒子的宽度 0 左侧盒子的宽度
)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/*
- 结构上先放中间盒子(中间盒子需要有子盒),再放左侧和右侧盒子
- 左侧盒子和右侧盒子给定固定宽度(px),中间盒子设置`width:100%`;
- 给左侧、右侧、中间三个盒子设置浮动(注意给父元素清浮动)
- 将左侧盒子拉到父元素的最左边(margin-left:-100%),将右侧盒子拉到父元素的最右边(margin-left:-右侧盒子的宽度)
- 将中间盒子露出来(给中间盒子的子盒设置margin:0 右侧盒子的宽度 0 左侧盒子的宽度)
*/
.clearfix::after {
content: "";
display: block;
clear: both;
}
.clearfix {
*zoom: 1;
}
.left {
float: left;
width: 200px;
min-height: 200px;
background-color: aqua;
margin-left: -100%;
}
.right {
float: left;
width: 300px;
min-height: 200px;
background-color: blueviolet;
margin-left: -300px;
}
.center {
float: left;
width: 100%;
min-height: 200px;
background: burlywood;
}
.son {
margin: 0 300px 0 200px;
}
</style>
</head>
<body>
<div class="wrap clearfix">
<div class="center">
<div class="son">中间盒子的内容</div>
</div>
<div class="left">左侧盒子</div>
<div class="right">右侧盒子</div>
</div>
</body>
</html>
3、等高布局
等高:如果一列的高度变化,其他列的高度也需要跟着变化
(1)内外间距相抵消实现等高
关键点:
- 给每一列设置
padding-bottom:9999px
,同时设置margin-bottom:-9999px
- 给父元素溢出隐藏(
overflow:hidden
)
优缺点:
- 优点:
- 代码简单,易于理解
- 兼容所有浏览器
- 缺点:
- 实现的是伪等高,需要合理的控制内外间距的值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.clearfix::after {
content: "";
display: block;
clear: both;
}
.clearfix {
*zoom: 1;
}
.wrap {
width: 1000px;
/* overflow: hidden; */
}
.wrap div {
float: left;
min-height: 200px;
}
.left {
width: 200px;
background-color: lawngreen;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.center {
width: 500px;
background-color: lightblue;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
.right {
width: 300px;
background-color: lightpink;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
</style>
</head>
<body>
<div class="wrap clearfix">
<div class="left">左盒</div>
<div class="center">中间盒子</div>
<div class="right">右盒</div>
</div>
</body>
</html>
本文地址:https://blog.csdn.net/qq_52426181/article/details/110228657
上一篇: RestTemplate使用
下一篇: wsl命令
推荐阅读
-
前端一面/面试常考题1-页面布局:假设高度已知,请写出三栏布局,其中左栏、右栏宽度各为300px,中间自适应。
-
移动端web自适应适配布局解决方案
-
Web页面中八种创建多列等高(等高列布局)的实现技术
-
移动端(手机端)页面自适应解决方案1(rem布局)---750设计稿
-
Android RecyclerView多类型布局卡片解决方案
-
10.布局:两栏和主区域在后的三栏布局,实现侧边栏和主区域伪等高、实现主区域在前的三栏布局
-
--------------------------三栏布局之左右宽度固定,中间自适应--------------------------
-
vue实现多栏布局拖拽
-
移动端页面自适应解决方案—rem布局
-
三栏布局(二)-------上下宽高固定,中间自适应