定宽自适应布局: 定宽的内容保持不变,自适应的内容随屏幕的大小的改变而改变。
方式一: 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; }
|
写的不好的地方,望大家多多指正,小弟感激不尽!