时间戳

首页 > 解决方案 > 我应该如何设置这些元素的宽度以使其完美契合？

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

问题描述

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

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>

请帮我把它设置为正确的尺寸！

标签： javascriptcss

解决方案

您需要添加尺寸的测量单位（“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>

推荐阅读