横向滚动div

　　

　　

　　//... more books

#shelf{
margin-top: 50px;
display: -webkit-box;
overflow-x: scroll;
-webkit-overflow-scrolling:touch;
}
.books{
width: 200px;
height: 200px;
border:5px solid #ccc;
margin-right: 30px;
}

滚动的时候会出现横向滚动条，不美观，这时候可以在#shelf的外层加一个div，设置其高度小于等于#shelf.height-scroll.height,即可。

比如：

 1 #shelf_wrap{
 2     margin-top:0.5rem;
 3             height:9rem;
 4             overflow-x:hidden;
 5             overflow-y:hidden;
 6     #shelf{
 7             display: -webkit-box;
 8             overflow-x: scroll;
 9             -webkit-overflow-scrolling:touch;
10             .books{
11               width: 6rem;
12                    height: 8.5rem;
13                    border:1px solid #ccc;
14                    margin-left: 0.5rem;
15                    margin-bottom:1.5rem;
16                    text-align:center;
17             .img_c{
18                     width: 5rem;
19                     height: 7rem;
20                     overflow:hidden;
21                     margin: 0px auto;
22                     margin-top:0.4rem;
23                 img{
24                     max-width:100%;
25                     height:auto;
26                 }
27             }
28                 span{
29                     font-size:1rem;
30                     font-style:italic;
31                     vertical-align:bottom;
32                 }
33             }
34     }
35 
36 }

 

转载于:https://www.cnblogs.com/alan2kat/p/7339348.html