左固定,右自适应
首先是html代码:
<div class="parent">
<div class="left">固定</div>
<div class="right">自适应</div>
</div>
方法:直接只用float就可以,不知道以下方法加上的好处?
方法一:使用float+margin-left实现
.left{
background-color: pink;
height: 300px;
width: 200px;
float: left;
}
.right{
background-color: green;
height: 300px;
margin-left:200px;
}
左侧布局左浮动,定宽,右侧布局margin-left:左侧宽度;
方法二:使用float+overflow:auto/hidden
.left{
background-color: pink;
height: 300px;
width: 200px;
float: left;
}
.right{
background-color: green;
height: 300px;
overflow:auto;
/*overflow:hidden;也可以*/
}
方法三:使用flex
.parent{
display: flex;
}
.left{
background-color: pink;
height: 300px;
flex: 0 0 200px;
}
.right{
background-color: green;
height: 300px;
flex:1 1 auto;
}
使用flex布局,左侧flex:0 0 200px,不扩大不缩小,固定宽度,右侧自适应扩大缩小。
左侧固定200px,右侧自适应:
右固定,左自适应
还是html代码:
<div class="parent">
<div class="left">固定区</div>
<div class="right">自适应区</div>
</div>
方法:使用float:right就行了,不知道加上以下方法的好处?
方法一:使用float+margin-right:
.left{
width:200px;
height: 300px;
background-color: pink;
float: right;
}
.right{
height: 300px;
background-color: green;
margin-right: 200px;
}
html代码中,固定放在左边的,但在布局上是在右边,所以要更改html代码,此方法就无效了。
修改html代码,让代码和布局一致:
<div class="parent">
<div class="free">自适应区</div>
<div class="box">固定区</div>
</div>
方法二:使用absolute+top+right:
.parent{
position: relative;
}
.box{
background-color: green;
width: 200px;
height: 300px;
position: absolute;
right: 0;
top: 0;
}
.free{
margin-right: 200px;
height: 300px;
background-color: pink;
}
就达到这个效果了,代码和布局一致:
但是,使用绝对定位对后面元素的布局不是很好,所以该方法得改进。
方法三:使用float+margin:
html代码:
<div class="parent">
<div class="freeBox">
<div class="free">自适应区</div>
</div>
<div class="box">固定区</div>
</div>
css代码:
.freeBox{
float: left;
margin-left: -200px;
width: 100%;
height: 300px;
background-color: green;
}
.free{
margin-left: 200px;
}
.box{
float: right;
width: 200px;
height: 300px;
background-color: pink;
}
图片显示:
方法四:标准方法display:table
没有那么麻烦的方法:
html代码:
<div class="parent">
<div class="freeBox">自适应区域</div>
<div class="rightBox">固定区域</div>
</div>
css代码:
.parent{
display: table;
width: 100%
}
.freeBox{
display: table-cell;
height: 300px;
background-color: yellow;
}
.rightBox{
display: table-cell;
width: 200px;
background-color: pink;
height: 300px;
}
父元素设置display为table,宽度100%,子元素都是table-cell,右边部分设置宽度,左边就自适应了。
图片显示:
部分参考:http://jo2.org/css-auto-adapt-width/
height和background-color都是为了显示便于看,不为关键代码。