CSS中的左右能拖動是指在一個容器中,將其中某個對象拖動到左邊或右邊時,容器的寬度會自動調整,以適應拖動后的位置。
.container { display: flex; width: 100%; height: 200px; overflow-x: scroll; } .box { width: 200px; height: 200px; flex-shrink: 0; cursor: grab; background-color: #ccc; } .box:active { cursor: grabbing; } .box.left { margin-right: 20px; } .box.right { margin-left: 20px; }
上面的代碼中,使用了flex布局,將容器設為可滾動,并設置了拖動手勢。可以通過添加left或right類名來控制拖動后的位置,從而實現左右能拖動的效果。
總的來說,CSS中的左右能拖動是一種常見的交互方式,常用于圖片庫、產品列表等需要分頁瀏覽的場景,可以有效提升用戶體驗。
上一篇css左右滾動圖片