弹性盒子布局的时候  想一行排列n 个元素  让他们具有相等的距离而且换行  但是 只要元素多了 一换行  就会出现下面这个问题一行排列四个元素为例

 

第二行 换行之后串位了 

解决办法 就是将 元素最后面加上可变数量的元素 并且隐藏 

    <script>
        (num => {
            let container = document.querySelector('.container')
            let boxs = container.querySelectorAll('.box')
            let y = boxs.length % num
            let addBoxNum = num - y
            for (let index = 0; index < addBoxNum; index++) {
                let container = document.querySelector('.container')
                let cloneBox = boxs[0].cloneNode(true)
                cloneBox.style.visibility = 'hidden'
                container.appendChild(cloneBox)
            }
        })(4)//每行排列元素的数量
    </script&gt;

效果

 完美解决 

原文地址:https://blog.csdn.net/callBack_____/article/details/127897370

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任

如若转载,请注明出处:http://www.7code.cn/show_16207.html

如若内容造成侵权/违法违规/事实不符,请联系代码007邮箱suwngjj01@126.com进行投诉反馈,一经查实,立即删除

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注