網(wǎng)頁局部的布局技巧:多欄自適應(yīng)布局問題發(fā)布者：本站     時間：2020-05-23 11:05:20

在網(wǎng)頁局部的布局上，需要采用大量的自適應(yīng)，來滿足不同長度數(shù)據(jù)、內(nèi)容的合理呈現(xiàn)。以此保證頁面不至于因為內(nèi)容過多等原因，導(dǎo)致重疊、溢出、撐開等破壞整體視覺效果的情況。這里就簡單談?wù)剮讉€自己碰到過的自適應(yīng)問題。

1、兩欄自適應(yīng)布局

在實際項目中，常常遇到如紅色線框部分的兩欄自適應(yīng)問題。其關(guān)鍵點是，左右兩欄均不定寬，右側(cè)欄條目數(shù)量不定。

由于IE6并不支持 display:table-cell 屬性，必須通過 CSS hack 來彌補這個缺陷。這里可以稍作改進，右側(cè)欄直接設(shè)定 overflow:auto;zoom:1 或者 overflow:hidden;zoom:1 的樣式。

2、三欄自適應(yīng)布局

談到三欄自適應(yīng)布局，這應(yīng)該是最為基本的網(wǎng)頁排版形式了。以Amazon首頁來說，其自適應(yīng)布局采用的是與Object-oriented CSS相類似的方案：

.wrap{background:gray;}
.left{float:left;width:250px;background:red;}
.right{float:right;width:300px;background:orange;}
.main{overflow:hidden;zoom:1;background:lime;}
<div class="wrap">
  <div class="left">左側(cè)欄</div>
  <div class="right">右側(cè)欄</div>
  <div class="main">主體部分</div>
</div>