横スクロール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