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

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- 王朝網路 版權所有