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

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

1、兩欄自適應布局

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

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

2、三欄自適應布局

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

.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">左側欄</div>
  <div class="right">右側欄</div>
  <div class="main">主體部分</div>
</div>