注冊/登錄,歡迎光臨!
加入收藏設為首頁網站地圖
您當前的位置:辛勤IT網 >> 網頁設計 >> DIV+CSS >> CSS實現避免頁面布局被大尺寸圖片和長字符串破壞
熱門:word | excel | powerpoint

CSS實現避免頁面布局被大尺寸圖片和長字符串破壞

2012/11/28 10:45:43 所屬分類:網頁設計 - DIV+CSS
內容提要:CSS實現避免頁面布局被大尺寸圖片和長字符串破壞,用TABLE和DIV做頁面布局設計的時候,遇到大尺寸的圖片和長英文字符串,布局中定義的尺寸都會被破壞,導致頁面布局變形.

  用TABLE和DIV做頁面布局設計的時候,遇到大尺寸的圖片和長英文字符串,布局中定義的尺寸都會被破壞,導致頁面布局變形.

  有沒有辦法可以解決呢?

  用CSS的屬性OVERFLOW:hidden可以來控制,這樣超出部分會自動隱藏,這樣做不好的地方是就是這部分的信息顯示不完全,比如圖片只顯示了一部分. 但是頁面布局不會亂.

  要注意的是,使用overflow的時候,一定要定義width,百分比或者具體值都可以.

  在使用DIV做頁面布局的時候,可以在大布局上定義,比如在左欄,右欄,中欄里面,也可以針對頁面中具體的某個布局元素.

  在用ul和li做圖片列表排列的時候,也可以用這個,這樣避免一些大尺寸圖搞亂布局,也可以解決瀏覽器窗口縮小時,li元素自動回行排列出錯的問題.

  BTW:用overflow:auto,還可以在頁面里模仿出IFRAME的效果,回頭寫出來

沒有使用overflow:hidden<br />
<div style="width:200px;background:green;color:#fff;padding:8px">
在這里來一個寬度大于200px的圖片吧!<br />
<img src="寬度大于200px的圖片的路徑" />
</div>
<br />
使用了overflow:hidden<br />
<div style="overflow:hidden;width:200px;background:green;color:#fff;padding:8px">這里同樣放那個圖片比較一下效果啊!<br />
<img src="寬度大于200px的圖片的路徑" />
</div>

網頁設計 | DIV+CSS
最近更新
推薦信息
關于我們 | 聯系方式 | 對話本站 | 版權聲明 | 所有信息
福建体彩31选7走势图开奖7