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

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

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

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

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

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

談到三欄自適應(yīng)布局，這應(yīng)該是最為基本的網(wǎng)頁(yè)排版形式了。以Amazon首頁(yè)來(lái)說(shuō)，其自適應(yīng)布局采用的是與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">左側(cè)欄</div>
  <div class="right">右側(cè)欄</div>
  <div class="main">主體部分</div>
</div>