Saya sedang membangun situs web dengan sekumpulan kotak dalam bentuk kotak. Saya ingin mereka menjadi kotak yang sempurna, dengan lebar dan tinggi yang sama. Ini bekerja dengan sangat baik, kecuali mereka berkedip antara memasang dua dan tiga pada satu baris saat Anda mengubah ukuran halaman. Berikut kodenya:

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>

Tolong bantu saya mengaturnya ke ukuran yang benar!

2
ezra 28 Oktober 2019, 20:46

1 menjawab

Jawaban Terbaik

Anda perlu menambahkan satuan ukuran dimensi ("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>
2
Greedo 28 Oktober 2019, 18:08