javascript - 我应该如何设置这些元素的宽度以使它们完美契合？

Question

我正在构建一个网站，其中包含一组网格形状的正方形。我希望它们是完美的正方形，宽度和高度相等。它工作得很好，除了当您调整页面大小时，它们会在一行上显示两个和三个之间闪烁。这是代码:

const get = (querySelector) => document.querySelector(querySelector),
      getAll = (querySelector) => document.querySelectorAll(querySelector),
      getClass = (className) => document.getElementsByClassName(className),
      getTag = (tagName) => document.getElementsByTagName(tagName);
function resizePosts() {
    if (get('.post')) {
        for (let i = 0; i < getClass('post').length; i++) {
            getClass('post')[i].style.width = getClass('post')[i].parentElement.offsetWidth/3-10.982;
            getClass('post')[i].style.height = getClass('post')[0].offsetWidth;
        }
    }
    window.addEventListener('resize', resizePosts, false);
}
window.addEventListener('load', resizePosts, false);
window.addEventListener('resize', resizePosts, false);

.posts {
    font-size: 2.5em;
    font-family: 'Lato', sans-serif;
    padding: 0 25px;
    flex-wrap: wrap;
    display: flex;
    min-height: 150px;
}
.posts-themselves {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.post {
    border: 0.5px solid black;
    margin: 5px;
    width: 33%;
    overflow: hidden;
}

<div class = 'posts'>
  <div class = 'posts-themselves'>
    <div class = 'post'>

    </div>
    <div class = 'post'>

    </div>
    <div class = 'post'>

    </div>
    <div class = 'post'>

    </div>
  </div>
</div>

请帮我设置正确的尺寸!

Answer 1

您需要添加尺寸的测量单位(“px”)

const get = (querySelector) => document.querySelector(querySelector),
      getAll = (querySelector) => document.querySelectorAll(querySelector),
      getClass = (className) => document.getElementsByClassName(className),
      getTag = (tagName) => document.getElementsByTagName(tagName);
function resizePosts() {
    if (get('.post')) {
        for (let i = 0; i < getClass('post').length; i++) {
            getClass('post')[i].style.width = getClass('post')[i].parentElement.offsetWidth/3-10.982 +"px";
            getClass('post')[i].style.height = getClass('post')[0].style.width;
        }
    }
}
window.addEventListener('load', resizePosts, false);
window.addEventListener('resize', resizePosts, false);

.posts {
    font-size: 2.5em;
    font-family: 'Lato', sans-serif;
    padding: 0 25px;
    flex-wrap: wrap;
    display: flex;
    min-height: 150px;
}
.posts-themselves {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
}
.post {
    border: 0.5px solid black;
    margin: 5px;
    overflow: hidden;
}

<div class = 'posts'>
  <div class = 'posts-themselves'>
    <div class = 'post'>

    </div>
    <div class = 'post'>

    </div>
    <div class = 'post'>

    </div>
    <div class = 'post'>

    </div>
  </div>
</div>