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

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

方式一：浮动 float + 外边距 margin

基本思路： 

1.  父元素设置 padding 将需要定宽的位置预留出来；

2.  子元素浮动；

3. 定宽的子元素，固定宽度，自适应的子元素，设置宽度100%；

4. 定宽的子元素，设置 margin 为负值，填补父元素 padding 预留出来的位置。

html

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

css

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

方式二：定位 position

基本思路： 

1. 父元素设置 padding 将需要定宽的位置预留出来；

2. 定宽的子元素，固定宽度，自适应的子元素，设置宽度100%；

3. 定宽的子元素，设置 positon 绝对定位（子绝父相），填补父元素 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;
}

方式三：弹性布局 flex

基本思路： 

1. 父元素开启弹性布局；

2. 定宽的子元素，固定宽度，自适应的子元素，设置 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;
}

学习笔记，根据自己理解整理，不对的地方望指正，感谢！

更多文章