我有一个项目阵列,这些项目被切成片和拼接,在不同的div中显示为两列。
我想要的是当屏幕尺寸变小时,一列的项目可以跳到另一列,这样在小屏幕上就会显示为一列。我只在网上找到与jquery相关的东西,但我想使用vanilla JS。我该怎么做呢?任何帮助都是非常感激的!
let arr = [
'a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l'
];
let hey = arr.slice(4);
let heyArray = arr.splice(0, 4);
document.getElementById('displayA').innerHTML = '<li><a href="#">' + hey.join('</a></li><li><a href="#">') + '</a></li>';
document.getElementById('displayB').innerHTML = '<li><a href="#">' + heyArray.join('</a></li><li><a href="#">') + '</a></li>';
div {
float: right;
margin-right: 1.2em;
padding: 0 20px;
}
<div id="displayA"></div>
<div id="displayB"></div>
我不太清楚我的理解,但如果你想要的是响应性,那么就应该是 css
的问题,而不是 js
.
在这里,你有 如何在css中实现,给元素加了一些宽度和背景色,这样视觉上更清晰。
基本上,我们的想法是有一个 flex-container
处理这些内部元素的渲染方向(默认为行,柔性包覆),或者当屏幕宽度足够小时,将该容器设置为列。