文章目录
  1. 1. 方式一: float + margin
  2. 2. 方式二: 定位
  3. 3. 方式三: 弹性布局

定宽自适应布局: 定宽的内容保持不变,自适应的内容随屏幕的大小的改变而改变。

方式一: float + margin

基本思路:
1.父元素设置padding将需要定宽的位置预留出来;
2.定宽的元素,固定宽度,自适应的元素,设置宽度100%,继承父元素;
3.子元素设置设置浮动(秉承要浮动都浮动原则);
4.定宽的子元素,设置margin为负值,填补父元素padding预留出来的位置。

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
.content{
height: 200px;
padding-left:200px;
}
.left{
float: left;
width: 200px;
height: 100%;
margin-left: -200px;
background-color: red;
}
.right{
float: left;
width: 100%;
height: 100%;
background-color: yellow;
}

1
2
3
4
5
<!-- 以下样式全为此结构 -->
<div class="content">
<div class="left">left</div>
<div class="right">right</div>
</div>

方式二: 定位

基本思路:
1.父元素使用padding把需要定宽的部分预留出来;
2.定宽的是元素固定宽度,自适应的元素,设置宽度100%,继承父元素;
3.定宽的元素设置定位,填补父元素padding预留出来的位置。

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.content{
position: relative;
height: 200px;
padding-left:200px;
}
.left{
position: absolute;
top: 0;
left: 0;
width: 200px;
height: 100%;
background-color: red;
}
.right{
width: 100%;
height: 100%;
background-color: yellow;
}

方式三: 弹性布局

基本思路:
1.父元素开启弹性布局;
2.需要固定宽度的元素,固定宽度;
3.自适应的元素,设置flex:1,把剩余的宽度全部用完。

代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.content{
display: flex;
height: 200px;
}
.left{
width: 200px;
height: 100%;
background-color: red;
}
.right{
flex: 1;
width: 100%;
height: 100%;
background-color: yellow;
}

写的不好的地方,望大家多多指正,小弟感激不尽!

文章目录
  1. 1. 方式一: float + margin
  2. 2. 方式二: 定位
  3. 3. 方式三: 弹性布局