左右固定,中间自适应的三种方法(弹性,浮动,定位)
弹性:
父弹性(display: flex;
)
左右正常写,中间flex: 1;
就行了
浮动:
有点坑,html方面,必须中间在最后,不然右边就会挤下来,查了下原因是因为dom的渲染机制的问题,
css方面左边左浮动,右边右浮动,中间margin: 0 220px;
把脱标的左边盒子挤开就行了,
<div class="box">
<div class="left"> </div>
<div class="right"> </div>
<div class="main"> </div>
</div>
定位:
父相子绝,左子盒子left: 0; top: 0
,右子盒子top: 0; right: 0;
,中间老规矩margin: 0 220px;
把脱标盒子挤开就行了
备注:这是去百度面试外包的题目,我没说清楚,扑街在百度漂亮面试官小姐姐手上
全部代码如下:
<!DOCTYPE html>
<html lang="zh-CH">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dom操作</title>
<style>
/* 弹性 */
* {
margin: 0;
padding: 0;
list-style: none;
}
.box {
display: flex;
height: 500px;
}
.left {
width: 220px;
height: 500px;
background-color: pink;
}
.main {
flex: 1;
height: 500px;
background-color: blue;
}
.right {
width: 220px;
height: 500px;
background-color: yellow;
}
</style>
<!-- <style>
/* 浮动 */
* {
margin: 0;
padding: 0;
list-style: none;
}
.box{
height: 500px;
}
.left {
width: 220px;
height: 500px;
background-color: pink;
float: left;
}
.main {
margin: 0 220px;
height: 500px;
background-color: blue;
}
.right {
width: 220px;
height: 500px;
background-color: yellow;
float: right;
}
</style> -->
<!-- <style>
/* 定位 */
* {
margin: 0;
padding: 0;
list-style: none;
}
.box{
position: relative;
}
.left {
width: 220px;
height: 500px;
background-color: pink;
position: absolute;
left: 0;
top: 0
}
.main {
margin: 0 220px;
height: 500px;
background-color: blue;
}
.right {
width: 220px;
height: 500px;
background-color: yellow;
float: right;
position: absolute;
top: 0;
right: 0;
}
</style> -->
</head>
<body>
<div class="box">
<div class="left"> </div>
<div class="main"> </div>
<div class="right"> </div>
</div>
</body>
</html>