css布局两边固定中间自适应的五种方法

发表于 更新于 分类于

利用自身浮动

1
2
3
4
5
6
7
8
9
10
<h2>1、利用自身浮动</h2>
<p>
  左右浮动两块div元素，脱离标准流，中间那块元素就会上去，跟他们一行，利用margin留出左右宽度
</p>
<div class="box1">
  <div class="boxLeft">左边</div>
  <div class="boxRight">右边</div>
  <!-- 注意这个div一定要放最下面 -->
  <div class="boxCenter">中间</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/* 1、利用自身浮动 */
.boxLeft {
  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;
}

利用绝对定位

1
2
3
4
5
6
7
8
9
<h2>2、利用绝对定位</h2>
<p>
  左右绝对定位的两块div元素,脱离标准流，中间那块元素就会上去，跟他们一行，利用margin留出左右宽度
</p>
<div class="box2">
  <div class="boxLeft2">左边</div>
  <div class="boxRight2">右边</div>
  <div class="boxCenter2">中间</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/* 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;
}

利用弹性布局

1
2
3
4
5
6
7
8
<h2>3、利用弹性布局</h2>
<p>设置flex:1;可以自适应剩余空间</p>
<div class="box3">
  <div class="boxLeft3">左边</div>
  <!-- 注意这个div一定要放中间 -->
  <div class="boxCenter3">中间</div>
  <div class="boxRight3">右边</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
/* 3、利用弹性布局 */
.box3 {
  display: flex;
}
.boxLeft3 {
  min-height: 100px;
  width: 200px;
  background: #987;
}
.boxRight3 {
  min-height: 100px;
  width: 300px;
  background: #369;
}
.boxCenter3 {
  min-height: 100px;
  margin: 0 20px;
  background: #192;
  flex: 1;
}

利用负 margin

1
2
3
4
5
6
7
8
9
10
11
12
<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
/* 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;
}

利用 display:table

1
2
3
4
5
6
7
<h2>5、利用display:table;</h2>
<div class="box5">
  <div class="boxLeft5">左边</div>
  <!-- 注意这个div一定要放中间 -->
  <div class="boxCenter5">中间</div>
  <div class="boxRight5">右边</div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* 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: 0 20px;
}
.boxRight5 {
  min-height: 100px;
  width: 300px;
  background: #369;
  display: table-cell;
}