css布局两边固定中间⾃适应原⽂链接：
<!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>css布局两边固定中间⾃适应</title>
<style>
/* 1、利⽤⾃⾝浮动 */
.boxLeft{
css固定定位
min-height:100px;
width:200px;
background: #987;
float: left;
}
.boxRight{
min-height:100px;
width:300px;
background: #369;
float: right;
}
.
boxCenter{
min-height:100px;
margin-left:220px;
margin-right:320px;
background: #192;
}
/* 2、利⽤绝对定位 */
.boxLeft2{
min-height:100px;
width:200px;
background: #987;
position: absolute;
left:0;
}
.boxRight2{
min-height:100px;
width:300px;
background: #369;
position: absolute;
right:0;
}
.boxCenter2{
min-height:100px;
margin-left:220px;
margin-right:320px;
background: #192;
}
/* 3、利⽤弹性布局 */
.box3{
display: flex;
}
.boxLeft3{
min-height:100px;
width:200px;
background: #987;
}
.boxRight3{
min-height:100px;
min-height:100px;
width:300px;
background: #369;
}
.boxCenter3{
min-height:100px;
margin:020px;
background: #192;
flex:1;
}
/* 4、利⽤负margin */
.boxCenter4{
width:100%;
min-height:100px;
float: left;
}
.center{
min-height:100px;
margin-left:220px;
margin-right:320px;
background: #192;
}
.boxLeft4{
min-height:100px;
width:200px;
background: #987;
float: left;
margin-left:-100%;
}
.boxRight4{
min-height:100px;
width:300px;
background: #369;
float: left;
margin-left:-300px;
}
/* 5、利⽤display */
.box5{
display: table;
width:100%;
}
.boxLeft5{
min-height:100px;
width:200px;
background: #987;
display: table-cell;
}
.boxCenter5{
min-height:100px;
background: #192;
margin:020px;
}
.boxRight5{
min-height:100px;
width:300px;
background: #369;
display: table-cell;
}
</style>
</head>
<body>
<h2>1、利⽤⾃⾝浮动</h2>
<p>左右浮动两块div元素，脱离标准流，中间那块元素就会上去，跟他们⼀⾏，利⽤margin留出左右宽度</p>
<p>左右浮动两块div元素，脱离标准流，中间那块元素就会上去，跟他们⼀⾏，利⽤margin留出左右宽度</p>
<div class=box1>
<div class="boxLeft">左边</div>
<div class="boxRight">右边</div>
<!--注意这个div⼀定要放最下⾯-->
<div class="boxCenter">中间</div>
</div>
<h2>2、利⽤绝对定位</h2>
<p>左右绝对定位的两块div元素，脱离标准流，中间那块元素就会上去，跟他们⼀⾏，利⽤margin留出左右宽度</p>
<div class=box2>
<div class="boxLeft2">左边</div>
<div class="boxRight2">右边</div>
<div class="boxCenter2">中间</div>
</div>
<h2>3、利⽤弹性布局</h2>
<p>设置flex:1；可以⾃适应剩余空间</p>
<div class=box3>
<div class="boxLeft3">左边</div>
<!--注意这个div⼀定要放中间-->
<div class="boxCenter3">中间</div>
<div class="boxRight3">右边</div>
</div>
<h2>4、利⽤负margin</h2>
<p>中间部分浮动，设置宽度100%，充满整个屏幕宽，内部⼀个div放置内容，利⽤margin设置留出左右两块的宽度</p> <div class=box4>
<!--注意这个div⼀定要放最上⾯-->
<div class="boxCenter4">
<div class="center">中间</div>
</div>
<div class="boxLeft4">左边</div>
<div class="boxRight4">右边</div>
</div>
<h2>5、利⽤display:table;</h2>
<div class=box5>
<div class="boxLeft5">左边</div>
<!--注意这个div⼀定要放中间-->
<div class="boxCenter5">中间</div>
<div class="boxRight5">右边</div>
</div>
</body>
</html>

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。