左侧固定右侧自适应

发表于

今天面基被考住，好是尴尬，之前很不屑的布局方式技巧概念不清晰，今后认真

html 布局

1
2
3
4
<div class="parent">
  <div class="left">左边内容</div>
  <div class="right">右边内容</div>
</div>

方法1：position + margin

方法：父集相对定位，左侧绝对定位，右侧margin-left

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.parent {
  width: 100%;
  height: 100px;
  margin: 100px auto;
  position: relative;
}
.left {
   width: 100px;
   height: 100px;
   position: absolute;
   left: 0;
   background: red;
}
.right {
  height: 100px;
  margin-left: 100px;
  background: blue;
}

方法2 ： 左测浮动，右侧overflow

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.parent {
  width: 300px;
  height: 100px;
  margin: 100px auto;
}
.left {
   width: 100px;
   height: 100px;
   float: left;
   background: red;
}
.right {
  height: 100px;
  overflow: hidden;
  background: blue;
}

方法3：左侧浮动，右侧margin-left

跟方法2类似，只是将右侧overflow改为margin-left

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.parent {
  width: 300px;
  height: 100px;
  margin: 100px auto;
}
.left {
   width: 100px;
   height: 100px;
   float: left;
   background: red;
}
.right {
  height: 100px;
  margin-left: 100px;
  background: blue;
}

方法4: css3 flex

利用css3的flex属性，右边设置为占比1，填充满剩余空间

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
.parent {
  width: 300px;
  height: 100px;
  margin: 100px auto;
  display: flex;
}
.left {
   width: 100px;
   height: 100px;
   background: red;
}
.right {
  height: 100px;
  flex: 1;
  background: blue;
}

方法五：使用CSS3属性calc()进行计算。注意：calc()里的运算符两边必须有空格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.parent {
  width: 100%;
  height: 100px;
  margin: 100px auto;
}
.left {
   width: 100px;
   height: 100px;
   float:left;
   background: red;
}
.right {
  height: 100px;
  float:left;
  width:calc(100% - 100px);
  background: blue;
}

方法六 左右两边 absolute

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
.parent {
  width: 300px;
  height: 100px;
  margin: 100px auto;
  position:relative;
}
.left {
   width: 100px;
   height: 100px;
   position: absolute;
   left: 0;
   background: red;
}
.right {
  height: 100px;
  position: absolute;
  left: 100px;
  right: 0;
  background: blue;
}