阿里云优惠活动，点击链接进行购买: 一年仅需96.9元即可以购买服务器~
腾讯云优惠活动, 点击链接进行购买一年仅需99元
腾讯云限时开团活动, 点击链接进行购买一年仅需95元
# css 实现左边定宽右边自适应的两列布局 5 种方法
在项目实践中不乏有需要两列式布局，左侧固定右侧自适应是比较常见的布局方式，现在我就来总结一下我自己所知道的 5 种方法。 html 代码结构：
<div class="box">
<div class="con1">
我是左边
</div>
<div class="con2">
我是右边
</div>
</div>
第一种： css 代码：
.box {
display: flex;
display: -webkit-flex;
}
.con1 {
flex: 0 1 100px;
background: #ff0;
}
.con2 {
flex: 1;
background: #fe3;
}
效果如下
第二种：
css 代码：
.con1 {
width: 100px;
float: left;
background: #ff0;
}
.con2 {
overflow: hidden;
background: #fe3;
}
第三种： css 代码：
.con1 {
width: 100px;
float: left;
background: #ff0;
}
.con2 {
margin-left: 100px;
background: #fe3;
}
第四种： css 代码：
.box {
position: relative;
}
.con1 {
position: absolute;
left: 0;
top: 0;
width: 100px;
background: #ff0;
}
.con2 {
margin-left: 100px;
background: #fe3;
}
第五种： css 代码：
.box {
position: relative;
}
.con1 {
position: absolute;
left: 0;
top: 0;
width: 100px;
background: #ff0;
}
.con2 {
position: absolute;
left: 100px;
top: 0;
right: 0;
width: 100%;
background: #fe3;
}