CSS可以實現兩列分別滾動,讓我們快速來介紹一下:
.scroll-box { display: flex; overflow-x: auto; } .scroll-box .scroll-item { flex: 0 0 auto; width: 300px; /* 寬度可根據需求調整 */ }
以上是CSS樣式,接下來是HTML代碼:
第一列的內容...
第二列的內容...
以上代碼中,我們使用了Flex布局,設置了溢出為橫向滾動。每個滾動項的寬度都是300px,可以根據需求調整寬度。在HTML代碼中,我們只需要按照以上結構在每個滾動項中添加內容即可。
這種方式可以方便地實現兩列分別滾動,適用于很多場景,比如觸屏設備或者電腦中需要讓用戶能夠同時查看兩個不同的列表的情況。