css左右能拖动 |css fixed absolute

.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中的左右能拖动是一种常见的交互方式，常用于图片库、产品列表等需要分页浏览的场景，可以有效提升用户体验。