定宽自适应布局:定宽的内容保持不变,自适应的内容随屏幕的大小的改变而改变。
方式一:浮动 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;
}
扫描二维码关注公众号,回复:
5040287 查看本文章
方式二:定位 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;
}
学习笔记,根据自己理解整理,不对的地方望指正,感谢!