你知道在我们写一个布局样式的时候，如何实现一个三列布局，就是左右侧固定，中间自适应宽度的样式么？今天汇仁智杰小编就在这里给大家说几种方法。希望对象需要的你有所帮助。
　　html代码(第一二种方法):
<div class="left">左侧固定区</div>
<div class="right">右侧固定区</div>
<div class="mid">中间自适应区</div>
　　css代码：
　　第一种方法（定位）：
.left {
　position: absolute;
　top: 0;
　left: 0;
　width: 100px;
　height: 200px;
　background-color: red;
}
.mid {
　margin-left: 100px;
　margin-right: 200px;
　height: 200px;
　background-color: blue;
}

.right {
　position: absolute;
　top: 0;
　right: 0;
　width: 200px;
　height: 200px;
　background-color: yellow;
}
　　第二种方法（浮动）：
.left {
float: left;
width: 100px;
height: 200px;
background-color: red;
}

.mid {
height: 200px;
background-color: blue;
}

.right {
float: right;
width: 200px;
height: 200px;
background-color: yellow;
}
　　第三种方法（负边距）：
　　html代码：
<div class="center fl">
　<div class="mid">
　　中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区中间自适应区
　</div>
</div>
<div class="left fl">左边固定区</div>
<div class="right fl">右边固定区</div>
　　css代码：
.fl { float: left; }

.center {
　width: 100%;
　height: 200px;
　background: yellow;
}
　.center .mid{
　margin-right: 100px;
　padding: 0 110px;
　}

.left{
　margin-left: -100%;
　width: 100px;
　height: 200px;
　background: green;
}

.right{
　margin-left: -200px;
　width: 200px;
　height: 200px;
　background: blue;
}
　　以上就是汇仁智杰所讲的几种方法，希望对您有所帮助，如果说您有什么不同的见解，请随时联系小编，我们一起探讨学习。