如何设置div内的模块靠左显示，模块内容按行显示？-灵析社区

 是要这样的吗, id是List的加上这个: display: flex; flex-wrap: wrap; span 改成div Title ul { padding: 0; position: relative; top: 70%; left: 45%; overflow: hidden; list-style: none; border: 0px solid #c1c1c1; display: inline-block; margin-top: 5px; height: 30px; } li { float: left; padding: 5px; color: #273346; font-size: 15px; cursor: pointer; } li:hover { font-weight: bold; background: #C1C1C1; } .active { background: #CCE8FF; } #List { display: flex; flex-wrap: wrap; } #List > div { text-align: center; } //定义变量 let data = [ { id: 1, name: '小岚', age: 25, gender: '女', src: 'https://vebaike.com/uploads/202309/1695222065Xi0uLws5_s.png' }, { id: 2, name: '小懒', age: 25, gender: '女', src: 'https://vebaike.com/uploads/202309/1695222065Xi0uLws5_s.png' }, { id: 3, name: '小烂', age: 25, gender: '女', src: 'https://vebaike.com/uploads/202309/1695222065Xi0uLws5_s.png' }, { id: 4, name: '小澜', age: 25, gender: '女', src: 'https://vebaike.com/uploads/202309/1695222065Xi0uLws5_s.png' }, { id: 5, name: '小蓝', age: 25, gender: '女', src: 'https://vebaike.com/uploads/202309/1695222065Xi0uLws5_s.png' }, { id: 6, name: '小兰', age: 25, gender: '女', src: 'https://vebaike.com/uploads/202309/1695222065Xi0uLws5_s.png' }, { id: 7, name: '小栏', age: 25, gender: '女', src: 'https://vebaike.com/uploads/202309/1695222065Xi0uLws5_s.png' }, { id: 8, name: '小揽', age: 25, gender: '女', src: 'https://vebaike.com/uploads/202309/1695222065Xi0uLws5_s.png' }, { id: 9, name: '小览', age: 25, gender: '女', src: 'https://vebaike.com/uploads/202309/1695222065Xi0uLws5_s.png' }, { id: 10, name: '小斓', age: 25, gender: '女', src: 'https://vebaike.com/uploads/202309/1695222065Xi0uLws5_s.png' }, { id: 11, name: '小榄', age: 25, gender: '女', src: 'https://vebaike.com/uploads/202309/1695222065Xi0uLws5_s.png' }, { id: 12, name: '小岚', age: 25, gender: '女', src: 'https://vebaike.com/uploads/202309/1695222065Xi0uLws5_s.png' }, { id: 13, name: '小岚', age: 25, gender: '女', src: 'https://vebaike.com/uploads/202309/1695222065Xi0uLws5_s.png' }, { id: 14, name: '小岚', age: 25, gender: '女', src: 'https://vebaike.com/uploads/202309/1695222065Xi0uLws5_s.png' }, { id: 15, name: '小岚', age: 25, gender: '女', src: 'https://vebaike.com/uploads/202309/1695222065Xi0uLws5_s.png' }, { id: 16, name: '小岚', age: 25, gender: '女', src: 'https://vebaike.com/uploads/202309/1695222065Xi0uLws5_s.png' }, { id: 17, name: '小岚', age: 25, gender: '女', src: 'https://vebaike.com/uploads/202309/1695222065Xi0uLws5_s.png' }, { id: 18, name: '小岚', age: 25, gender: '女', src: 'https://vebaike.com/uploads/202309/1695222065Xi0uLws5_s.png' }, { id: 19, name: '小岚', age: 25, gender: '女', src: 'https://vebaike.com/uploads/202309/1695222065Xi0uLws5_s.png' }, ]; var nodeEle = document.createElement('div'); nodeEle.id = "listpage"; document.documentElement.appendChild(nodeEle);//元素加入body const newnodeDiv = document.getElementById("listpage"); newnodeDiv.innerHTML = ''; newnodeDiv.setAttribute('style', '' + 'position:fixed;' + //'right:0px;' + 'top:0px;' + 'left:0px;' + // 'left:620px;' + // 'bottom:240px;' + //'left:' + newwid + 'px;' + //'top:'+ newhei + 'px;' + //'bottom:'+ he + 'px;' + 'width:1277px;' +//最大宽度 'height:592px;' +//最大高度 //'height:auto;' + 'overflow:auto;' + //'overflow-wrap: break-word;' + 'font-size:14px!important;' + //'padding:40px;' + 'border-radius:5px!important;' + //'border:none;' + //'border:1px solid #ccc!important;' + 'border:1px solid #a9a9a9!important;' + 'background-color:#fff!important;' + 'z-index:2147483647!important;' +//显示最顶层 ''); var div0 = document.createElement('div'); div0.innerText = '封面'; div0.style.width = '1500px'; newnodeDiv.appendChild(div0); var newDiv = document.createElement('div'); newDiv.id = "List"; newDiv.style.height = 'auto'; newDiv.style.width = '1500px'; newnodeDiv.appendChild(newDiv); let div = document.getElementById("List"); currentPage = 1, pageCount = 12, list = null, li = null; function paginationByJS(data, div, currentPage, pageCount, list, li) { //拿到我们的总页码 function getTotalPage(data, pageCount) { if (Math.ceil(data.length / pageCount) 0 && !data.length && !totalPge > 0 && !pageCount > 0) { return console.error('您传入的参数有误'); } //当前页在头尾的情况 if (currentPage === 1) { return (totalPge === 1) ? { begin: 0, end: data.length - 1 } : { begin: 0, end: pageCount - 1 } } if (currentPage === totalPge) { begin = ((currentPage - 1) * pageCount); end = data.length - 1; return { begin, end } } //在中间的情况 if (currentPage > 1 && currentPage parseInt(i.innerText) === currentPage)).classList.add('active'); } //返回渲染数组 function getRenderList() { let temp = getArrIndex(currentPage, data, getTotalPage(data, pageCount), pageCount); return data.slice(temp.begin, temp.end + 1); //slice方法取头不拿尾 } //第一次创造列表数据 function createBtn(totalPage) { //let ul = document.getElementsByTagName('ul')[0]; var newUl = document.createElement('ul'); newUl.id = "ul-list"; //let ul = document.getElementsByTagName('ul'); newnodeDiv.appendChild(newUl); const ul = document.getElementById("ul-list"); //每次都至少显示五个 当前 当前的前2个 当前的后2个 for (let i = 1; i 6 && totalPage > 7) { li.innerText = '...'; ul.appendChild(li); li = document.createElement('li'); li.innerText = totalPage; ul.appendChild(li); li = document.createElement('li'); li.innerText = '>'; ul.appendChild(li); break; } ul.appendChild(li); //到头了您 if (i === totalPage) { li = document.createElement('li'); li.innerText = '>'; ul.appendChild(li); } } } function btnControl(totalPage, currentPage) { //小于7 就直接全部排出来就ok 不用搞这些花里胡哨的 if (totalPage { //实际页码改变的按钮 index = parseInt(i.innerText); return (index !== 1 && index !== totalPage && index.toString() !== 'NaN'); }), headFlag = list[2], endFlag = list[list.length - 3]; //控制插入 '...' if (currentPage > 4 && headFlag.innerText !== '...') { li = document.createElement('li'); li.innerText = '...'; list[0].parentElement.insertBefore(li, headFlag); } if ((currentPage > 1) && endFlag.innerText !== '...') { li = document.createElement('li'); li.innerText = '...'; list[0].parentElement.insertBefore(li, list[list.length - 2]); //加入之前的所以是 list.length-2 } //控制删除 '...' if (currentPage = totalPage && endFlag.innerText === '...') { endFlag.parentNode.removeChild(endFlag); } //关键的控制 基于他们展示时当前页 和 头尾 在边界位置以及普通位置的情况来做考虑 //在中间的时候 以currentPage为中心 前后2格 if (before > 1 && after ': currentPage = currentPage === totalPage ? totalPage : currentPage + 1; break; case '...': break; default: currentPage = parseInt(target.innerText); } } } function displayData() { let arr = getRenderList(), p;//最后得到的数据 div.innerHTML = ''; //重置div内容区域 arr.forEach(i => { var div1 = document.createElement('div'); var img1 = document.createElement('img'); var s0 = document.createElement('div') var s1 = document.createElement('div'); var s2 = document.createElement('div'); img1.src = i.src; img1.style.width = '240px'; s1.innerText = i.name; s2.innerText = i.age; div1.appendChild(img1); div1.appendChild(s1); div1.appendChild(s2); // div1.appendChild(s0); div.appendChild(div1); }); //展示一下 } //这个是事件的监听函数 function pagination(target) { let totalPage = getTotalPage(data, pageCount); //兼容拿到事件 arrowControl(target, totalPage); btnControl(totalPage, parseInt(currentPage)); isActive(); displayData(); } //首次注册生成第一页数据和分页栏 function firstInit() { createBtn(parseInt(getTotalPage(data, pageCount))); isActive(); displayData(); } window.onload = function () { firstInit(); Array.from(document.getElementsByTagName('li')).forEach(i => i.onclick = function (e) { pagination(e) }); } } paginationByJS(data, div, currentPage, pageCount, list, li)