W3School TIY Editor
W3School 在线教程
改变方向
暗黑模式
运行代码
<!DOCTYPE html> <html> <head> <style> #container { width: 80%; aspect-ratio: 2/1; margin: auto; border: solid black 2px; overflow-x: scroll; overflow-y: hidden; white-space: nowrap; scroll-snap-type: x mandatory; } #container > img { height: 95%; margin: 2px; scroll-snap-align: none center; } </style> </head> <body> <h1>CSS scroll-snap-align 属性</h1> <p>在图片库框内水平拖动滚动条，然后松开，观察滚动吸附效果，使图片对齐到中心位置。</p> <div id="container"> <img src="/i/photo/beijing.jpg" alt="Beijing" width="600" height="400"> <img src="/i/photo/dancer.png" alt="Dancer" width="500" height="749"> <img src="/i/photo/wuhan.jpg" alt="Wuhan" width="600" height="400"> <img src="/i/photo/tulip.jpg" alt="Tulip" width="300" height="300"> <img src="/i/photo/hangzhou.jpg" alt="Hangzhou" width="600" height="400"> </div> </body> </html>