CSS實現經典三欄布局(兩側定寬,中間自適應)


  近期開始獨立攻克百度前端技術學院的各項任務,之前做了兩個比較復雜的頁面,深深感覺基礎不好,好多css的語句都是為了實現效果而去寫的,出現了好多問題,而自己的解決方案也不夠優,於是決定從基礎開始學起,循序漸進。

  第一個任務是實現一個三欄布局,外部的兩欄固定寬度,中間自適應,以下是效果圖:

  

  我使用了兩種方法實現以上效果:float和position

  以下是float方法的CSS代碼:

 1 .team-inf{
 2     float: left;
 3     width: 200px;
 4 }
 5 .logo-group{
 6     float: right;
 7     padding: 0;
 8     width: 120px;
 9     height: 420px;
10 }
11 .team-intro{
12     margin: 0 140px 0 220px;
13 }

  注意:中間欄的margin-left和margin-right是根據左右兩欄的寬度計算而得的,若不設置這兩個參數,中間欄的長度將和父容器相同,無法實現三欄並列的效果。

  相應的html代碼如下:

 1 <div class="container border-group">
 2         <div class="team-inf border-group">
 3             <img src="images/teamlogo.jpg" class="team-logo"/>
 4             <div class="team-name">Yvonne Kong</div>
 5         </div>
 6         <div class="logo-group border-group">
 7             <img src="./images/logo1.jpg" class="personal-logo"/>
 8             ......
11         </div>
12         <div class="team-intro border-group">
13             ......21         </div>
22     </div>

  注意:

  1. 中間欄是最后一個div,三欄在html中的書寫順序很重要。
  2. 為了使父容器的長度自適應最長的子元素,只需將父容器的over-flow屬性設置成hidden。

 

  以下是position方法的CSS代碼:

 1 .container{
 2     position: relative;
 3     min-height: 460px;
 4     background-color: #eee;
 5 }
 6 .team-inf{
 7     position: absolute;
 8     left: 20px;
 9     width: 200px;
10 }
11 .logo-group{
12     position: absolute;
13     right: 20px;
14     padding: 0;
15     width: 120px;
16     height: 420px;
17 }
18 .team-intro{
19     margin: 0 140px 0 220px;
20 }

   將父容器的position設置為relative,兩個邊欄的position設置成absolute即可。

   注意:

  1. 為了使父容器的長度自適應最長的子元素,無法通過設置父容器的over-flow屬性實現。在這里,我們為父容器設置了min-height,其值由兩邊欄中較長的一方決定,當中間欄的長度高於兩邊欄時,父容器的長度會適應中間欄的長度。
  2. 由於兩邊欄寬度固定,當瀏覽器寬度縮小時,為了保證中間欄仍占用一定寬度,我們為父容器設置了min-width。
  3. 右側欄的個人logo部分,是四個定高定長的img元素,通過display:block,magin:20px來實現等間距布局。(是否還有更好的等間距布局方式,有待學習)
  4. 當不為div元素設置寬度時,其默認寬度與父容器寬度相同,所以當我們為body設置了width:100%, padding:20px,之后,不必再為子div設置寬度,若此時設置了.container的width為100%,頁面右側不會出現20px的padding。
  5. 各個模塊都需設置padding屬性,所以box-sizing設置為border-box更佳。

   以上是自己做這個task后的感受,其中可能有很多問題,自己會不斷學習,不斷優化本篇博文。

   最后貼一下我的demo   code


注意!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系我们删除。



 
  © 2014-2022 ITdaan.com 联系我们: