左边固定宽度，右边自适应
浮动布局的方法
<section class="container homeSection" id="mainSection">
<div class="content-wrap">
222
</div>
<div class="rightSide">
333
</div>
</section> <style lang="scss">
.homeSection {
overflow: hidden;
.content-wrap {
float: left;
width: 200px;
background-color: #fff;
}
.rightSide {
margin-left: -200px;
background: #F0AD4E;
}
}
</style>
绝对定位的方法：
<section class="container homeSection" id="mainSection">
<div class="content-wrap">
<div class="bannerFloor">
122
</div>
</div>
<div class="rightSide">
333
</div>
</section>
<style>
.homeSection {
position: relative;
.content-wrap {
position: absolute;
left: 0;
width: 200px;
}
.rightSide {
position: absolute;
left: 200px;
right: 0;
} }
</styles>
还有就是 flex 布局喽，大家应该都知道，就不写了。
左边固定宽度，右边自适应
浮动方法
以下是html代码，与上面有所不同的是，书写代码的时候，right代码在前面
<section class="container homeSection" id="mainSection">
<div class="rightSide">
333
</div>
<div class="content-wrap">
<div class="bannerFloor">
<p>
你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁
</p>
</div>
</div> </section>
.homeSection {
overflow: hidden;
.content-wrap {
background-color: #fff;
margin-right: 200px;
}
.rightSide {
float: right;
width: 200px;
background: #F0AD4E;
}
}另一种浮动的方法：需要给左边自适应的元素一个父元素， 如文中的content-wrap
<section class="container homeSection" id="mainSection">
<div class="content-wrap">
<div class="bannerFloor">
<p>
你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁你是谁
</p>
</div>
</div>
<div class="rightSide">
333
</div>
</section>.content-wrap {
float: left;
.bannerFloor {
margin-right: 200px;
}
}
.rightSide {
float: left;
width: 200px;
margin-left: -200px;
background: #F0AD4E;
}同意的，它也有 绝对定位 跟 flex 的方法，不一一的列出来了。
更详细的内容可以访问 http://www.waigai.cn