你知道在我們寫一個布局樣式的時候，如何實現一個三列布局，就是左右側固定，中間自適應寬度的樣式么？今天匯仁智杰小編就在這里給大家說幾種方法。希望對象需要的你有所幫助。
　　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;
}
　　以上就是匯仁智杰所講的幾種方法，希望對您有所幫助，如果說您有什么不同的見解，請隨時聯系小編，我們一起探討學習。