左侧定宽，右侧自适应与双飞翼布局

| |

mark

左侧定宽，右侧自适应布局：

1
2
3
<!-- html -->
<div class="left">left</div>
<div class="right">right</div>
1
2
3
4
5
6
7
8
9
.left{
  background-color: #4FB3A4;
  width: 200px;
  height: 500px;
}
.right{
  background-color: #e07d075c;
  height: 500px;
}

flex 布局

1
2
3
4
5
6
7
8
9
body{
  display: flex;
}
.left{
  flex: 0 0 200px;
}
.right{
  flex: 1;
}
1
flex: none | [ <'flex-grow'> <'flex-shrink'> <'flex-basis'> ]

默认 0 1 auto

  • flex-grow：定义项目的放大比例，默认为0
  • flex-shrink：定义了项目的缩小比例，默认为1
  • flex-basis：定义了在分配多余空间之前，项目占据的主轴空间（main size）

左侧浮动，右侧width:100%

1
2
3
4
5
6
.left{
  float: left;
}
.right{
  width: 100%;
}

左侧绝对定位，右侧设置margin-left

1
2
3
4
5
6
7
8
9
body{
  position: relative;
}
.left{
  position: absolute;
}
.right{
  margin-left: 200px;
}

两侧都是绝对定位

1
2
3
4
5
6
7
8
9
10
11
body{
  position: relative;
}
.left{
  position: absolute;
}
.right{
  position: absolute;
  left: 200px;
  width: 100%;
}

两侧都左浮动，右侧设置calc宽度

1
2
3
4
5
6
7
.left{
  float: left;
}
.right{
  float: left;
  width: calc(100% - 200px);
}

负margin

首先需要把右侧自适应部分用容器包起来并放在前面：

1
2
3
4
<div class="wrapper">
    <div class="right">right</div>
</div>
<div class="left">left</div>
1
2
3
4
5
6
7
8
9
10
11
.wrapper{
  float: left;
  width: 100%;
}
.left{
  float: left;
  margin-left: -100%;
}
.right{
  margin-left: 200px;
}

双飞翼布局（三栏布局）

mark

flex布局

1
2
3
<div class="left">left</div>
<div class="content">content</div>
<div class="right">right</div>
1
2
3
4
5
6
7
8
9
10
11
12
body{
  display: flex;
} 
.left{
  flex: 0 0 200px;
}
.content{
  flex: 1;
}
.right{
  flex: 0 0 200px;
}

负margin

原理同左侧定宽，右侧自适应布局的负margin方法。
将content放置在文档流前面可以让其优先渲染。

1
2
3
4
5
<div class="wrapper">
  <div class="content">content</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
  1. 三者都设置向左浮动。
  2. 设置wrapper宽度为100%。
  3. 设置 负边距，left设置负左边距为100%，right设置负左边距为负的自身宽度。
  4. 设置content的margin值给左右两个子面板留出空间。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.wrapper{
  float: left;
  width: 100%;
}
.left{
  float: left;
  margin-left: -100%;
}
.right{
  float: left;
  margin-left: -200px;
}
.content{
  margin : 0 200px;
}

计算宽度calc()

1
2
3
<div class="left">left</div>
<div class="content">content</div>
<div class="right">right</div>
1
2
3
4
5
6
7
8
9
10
.left{
  float: left;
}
.right{
  float: left;
}
.content{
  float: left;
  width: calc(100% - 400px)
}