你知道在我們寫(xiě)一個(gè)布局樣式的時(shí)候，如何實(shí)現(xiàn)一個(gè)三列布局，就是左右側(cè)固定，中間自適應(yīng)寬度的樣式么？今天匯仁智杰小編就在這里給大家說(shuō)幾種方法。希望對(duì)象需要的你有所幫助。
　　html代碼(第一二種方法):
<div class="left">左側(cè)固定區(qū)</div>
<div class="right">右側(cè)固定區(qū)</div>
<div class="mid">中間自適應(yīng)區(qū)</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;
}
　　第二種方法（浮動(dòng)）：
.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;
}
　　第三種方法（負(fù)邊距）：
　　html代碼：
<div class="center fl">
　<div class="mid">
　　中間自適應(yīng)區(qū)中間自適應(yīng)區(qū)中間自適應(yīng)區(qū)中間自適應(yīng)區(qū)中間自適應(yīng)區(qū)中間自適應(yīng)區(qū)中間自適應(yīng)區(qū)中間自適應(yīng)區(qū)中間自適應(yīng)區(qū)中間自適應(yīng)區(qū)中間自適應(yīng)區(qū)中間自適應(yīng)區(qū)
　</div>
</div>
<div class="left fl">左邊固定區(qū)</div>
<div class="right fl">右邊固定區(qū)</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;
}
　　以上就是匯仁智杰所講的幾種方法，希望對(duì)您有所幫助，如果說(shuō)您有什么不同的見(jiàn)解，請(qǐng)隨時(shí)聯(lián)系小編，我們一起探討學(xué)習(xí)。