横スクロールdiv
5291 ワード
//... 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