久久亚洲中文字幕精_精品国产一区二区三区不卡_99久久久无码国产精品免费手机_国产亚洲精品久久久久动漫

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

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

1、兩欄自適應布局

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

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

2、三欄自適應布局

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