定宽自适应布局的实现方式

文章目录

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

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

方式一: float + margin

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

代码如下:

.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;
}

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

方式二: 定位

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

代码如下:

.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，把剩余的宽度全部用完。

代码如下:

.content{
    display: flex;
    height: 200px;
}
.left{
    width: 200px;
    height: 100%;
    background-color: red;
}
.right{
    flex: 1;
    width: 100%;
    height: 100%;
    background-color: yellow;
}

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