css的經典三欄式布局

標籤：abs   container   自己   nbsp   ati   計算   ack   兩種   log   

      今天上百度前端技術學院的做任務鞏固基礎，之前做了兩個比較複雜的頁面，總覺得自己有時好有時差，於是決定從基礎任務開始從新做一遍查缺補漏。

 

第一個任務是實現一個三欄布局，外部的兩欄固定寬度，中間自適應，以下是：

 

我自己採用了兩種布局方式：

首先是：浮動float

css代碼：

.team-inf{  //左側邊欄的寬為固定寬200px
float: left;
width: 200px;
}

.logo-group{   //右側邊欄的寬為固定寬120px
float: right;
padding: 0;
width: 120px;
}

.team-intro{
margin: 0 140px 0 220px;  // 中間欄的寬度自適應，用margin的值去隔開左右欄(需要計算左右兩欄的寬度)，並設定距離左右兩欄間隔為20px,
}

div代碼：

<div class="container">
<div class="team-inf"></div>
<div class="logo-group"></div>
<div class="team-intro"></div>
</div>  // ***中間欄的div要放到最後,float浮動的特點決定了，它的位置。

 

 

 

然後是position方法

CSS代碼：

.container{
position: relative;
}

.team-inf{  

position:absolute;
top:0;
left: 0;

width: 200px;
}

.logo-group{  

position:absolute;
top:0;
right: 0;

width: 120px;
}

.team-intro{
margin: 0 140px 0 220px;  
}

將父容器的position設定為relative，兩個側邊欄的position設定成absolute即可。

css的經典三欄式布局