横向滚动div

<div id="shelf">

　　<div class="books"><div>

　　<div class="books"><div>

　　//... more books

</div>

#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,即可。

比如：

 #shelf_wrap{
     margin-top:0.5rem;
             height:9rem;
             overflow-x:hidden;
             overflow-y:hidden;
     #shelf{
             display: -webkit-box;
             overflow-x: scroll;
             -webkit-overflow-scrolling:touch;
             .books{
               width: 6rem;
                    height: 8.5rem;
                    border:1px solid #ccc;
                    margin-left: 0.5rem;
                    margin-bottom:1.5rem;
                    text-align:center;
             .img_c{
                     width: 5rem;
                     height: 7rem;
                     overflow:hidden;
                     margin: 0px auto;
                     margin-top:0.4rem;
                 img{
                     max-width:100%;
                     height:auto;
                 }
             }
                 span{
                     font-size:1rem;
                     font-style:italic;
                     vertical-align:bottom;
                 }
             }
     }

 }