关键样式:
white-space:nowrap;/*内容横向排列不换行*/
overflow-x:auto; overflow-y:hidden;/*隐藏溢出部分。横向滚动条自动出现,纵向滚动条隐藏*/
预览代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <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="" _fcksavedurl="" width="670" height="375" alt="img" /> <img src="" _fcksavedurl="" width="670" height="375" alt="img" /> <img src="" _fcksavedurl="" width="670" height="375" alt="img" /> <img src="" _fcksavedurl="" width="670" height="375" alt="img" /> </div> </body> </html> |