面试高频题实现:定高100px,左右宽度均为200px,中间自适应。
1、浮动—float
<style>
.wrap > div {height: 200px; text-align: center; line-height: 200px; }
.float .left {
width: 200px;
float: left;
background-color: #f00;
}
.float .center {
background-color: green;
}
.float .right {
width: 200px;
float: right;
background-color: #ff0;
}
</style>
<div class="wrap float">
<div class="left">我是左边栏</div>
<div class="right">我是右边栏</div>
<div class="center">我是float</div>
</div>
注意点:
1、页面div布局的结构需如上(左右中),如果结构变动,所需效果不会实现。
2、注意清除浮动,否则会影响页面其他的结构。
2、定位—position
<style>
.position .left {
width: 200px;
position: absolute;
left: 0;
background-color: #f00;
}
.position .center {
background-color: green;
position: absolute;
left: 200px;
right: 200px;
}
.position .right {
width: 200px;
position: absolute;
right: 0;
background-color: #ff0;
}
</style>
<div class="wrap position">
<div class="left">我是左边栏</div>
<div class="center">我是position</div>
<div class="right">我是右边栏</div>
</div>
注意点:
1、页面布局的结构可正常写,如果布局中间位置与右部分对调,那么中间样式无需定位。
2、文案脱离文档流,实际应用是需要注意。
3、弹性盒子布局—flex
<style>
.flexbox {display: flex;}
.flexbox .left {
width: 200px;
background-color: #f00;
}
.flexbox .center {
flex: 1;
background-color: green;
}
.flexbox .right {
width: 200px;
background-color: #ff0;
}
</style>
<div class="wrap flexbox">
<div class="left">我是左边栏</div>
<div class="center">flexbox</div>
<div class="right">我是右边栏</div>
</div>
注意点: 不兼容ie8以下版本,若不考虑该情况,flex是不错的选择。