| 導購 | 订阅 | 在线投稿
分享
 
 
 

css實現圖片橫向排列,溢出隱藏\滾動條橫向拖動

2008-12-04 08:25:57  編輯來源:互聯網  简体版  手機版  評論  字體: ||
 
  關鍵樣式:

  white-space:nowrap;/*內容橫向排列不換行*/

  overflow-x:auto;overflow-y:hidden;/*隱藏溢出部分。橫向滾動條自動出現,縱向滾動條隱藏*/

  預覽代碼:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  <html xmlns="http://www.w3.org/1999/xhtml">

  <head>

  <meta. http-equiv="Content-Type" content="text/html; charset=utf-8" />

  <title>css實現圖片橫向排列,溢出隱藏橫向滾動</title>

  <style. type="text/css">

  <!--

  .inimg {width:670px;height:395px;white-space:nowrap;overflow-x:auto;overflow-y:hidden;}

  .inimg img {width:670px;height:375px;}

  -->

  </style>

  </head>

  <body>

  <div class="inimg">

  <img src="http://www.devdao.com/Article/img2005/jc06081_2.jpg" _fcksavedurl="http://www.devdao.com/Article/img2005/jc06081_2.jpg" width="670" height="375" alt="img" />

  <img src="http://www.devdao.com/Article/img2005/jc06081_2.jpg" _fcksavedurl="http://www.devdao.com/Article/img2005/jc06081_2.jpg" width="670" height="375" alt="img" />

  <img src="http://www.devdao.com/Article/img2005/jc06081_2.jpg" _fcksavedurl="http://www.devdao.com/Article/img2005/jc06081_2.jpg" width="670" height="375" alt="img" />

  <img src="http://www.devdao.com/Article/img2005/jc06081_2.jpg" _fcksavedurl="http://www.devdao.com/Article/img2005/jc06081_2.jpg" width="670" height="375" alt="img" />

  </div>

  </body>

  </html>
 
關鍵樣式: white-space:nowrap;/*內容橫向排列不換行*/ overflow-x:auto;  overflow-y:hidden;/*隱藏溢出部分。橫向滾動條自動出現,縱向滾動條隱藏*/ 預覽代碼: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "[url=http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd]http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd[/url]"> <html xmlns="[url=http://www.w3.org/1999/xhtml]http://www.w3.org/1999/xhtml[/url]"> <head> <meta. http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>css實現圖片橫向排列,溢出隱藏橫向滾動</title> <style. type="text/css"> <!-- .inimg {width:670px;height:395px;white-space:nowrap;overflow-x:auto;overflow-y:hidden;} .inimg img {width:670px;height:375px;} --> </style> </head> <body> <div class="inimg"> <img src="[url=http://www.devdao.com/Article/img2005/jc06081_2.jpg]http://www.devdao.com/Article/img2005/jc06081_2.jpg[/url]" _fcksavedurl="[url=http://www.devdao.com/Article/img2005/jc06081_2.jpg]http://www.devdao.com/Article/img2005/jc06081_2.jpg[/url]" width="670" height="375" alt="img" /> <img src="[url=http://www.devdao.com/Article/img2005/jc06081_2.jpg]http://www.devdao.com/Article/img2005/jc06081_2.jpg[/url]" _fcksavedurl="[url=http://www.devdao.com/Article/img2005/jc06081_2.jpg]http://www.devdao.com/Article/img2005/jc06081_2.jpg[/url]" width="670" height="375" alt="img" /> <img src="[url=http://www.devdao.com/Article/img2005/jc06081_2.jpg]http://www.devdao.com/Article/img2005/jc06081_2.jpg[/url]" _fcksavedurl="[url=http://www.devdao.com/Article/img2005/jc06081_2.jpg]http://www.devdao.com/Article/img2005/jc06081_2.jpg[/url]" width="670" height="375" alt="img" /> <img src="[url=http://www.devdao.com/Article/img2005/jc06081_2.jpg]http://www.devdao.com/Article/img2005/jc06081_2.jpg[/url]" _fcksavedurl="[url=http://www.devdao.com/Article/img2005/jc06081_2.jpg]http://www.devdao.com/Article/img2005/jc06081_2.jpg[/url]" width="670" height="375" alt="img" /> </div> </body> </html>
󰈣󰈤
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
王朝網路微信公眾號
微信掃碼關註本站公眾號 wangchaonetcn
 
  免責聲明:本文僅代表作者個人觀點,與王朝網絡無關。王朝網絡登載此文出於傳遞更多信息之目的,並不意味著贊同其觀點或證實其描述,其原創性以及文中陳述文字和內容未經本站證實,對本文以及其中全部或者部分內容、文字的真實性、完整性、及時性本站不作任何保證或承諾,請讀者僅作參考,並請自行核實相關內容。
 
© 2005- 王朝網路 版權所有