横向滚动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;
                }
            }
    }

}