javascript - 在不使用 css grid 和 css flex 的情况下创建类似的东西

Question

我需要创建这样的东西

由于个人原因不使用 CSS 网格或不使用 CSS flex 我在某些情况下对这些方法有很多问题，是的，它们确实会生成

类似的东西，但在某些情况下他们让我失望了。如果你们可以提供自己的代码方法来说明如何在不使用 CSS 网格或不使用 CSS flex 的情况下执行此操作，请给我一个代码示例。我想知道我是否可以仅使用 CSS 来做到这一点，还是可以

必须为此使用 JavaScript 吗？如果是这样，那我也不介意。忽略那个黑色的东西我正在尝试重新创建那个灰色容器，这些图像如何在那个灰色容器内重新调整它自己，最后一件事不使用媒体查询我知道这在不使用它们的情况下也是可能的。这是我被困的地方

/*Do I have to use JavaScript for this? Yes or No??*/

/*What else do I have to add??*/

#container{
  background-color: gray;
  width: 40%;
}

img{
  width: 150px;
}

<div id='container'>
  <img src='https://www.tomswallpapers.com/large/201610/75735.jpg'>
  <img src='https://www.tomswallpapers.com/large/201610/75735.jpg'>
  <img src='https://www.tomswallpapers.com/large/201610/75735.jpg'>
  <img src='https://www.tomswallpapers.com/large/201610/75735.jpg'>
  <img src='https://www.tomswallpapers.com/large/201610/75735.jpg'>
</div><!--</container>-->

Answer 1

这是一种方法，使用调整大小事件监听器和一些数学:

function resize() {
  var w = parseFloat(getComputedStyle(document.body).width) * 0.6;
  var times = Math.round(w / 150);
  var iw = w / times;
  
  Array.prototype.forEach.call( 
document.querySelectorAll('#container img'),
function(img){
  img.style.width = iw + "px";
  document.querySelector('#container').style.width = (iw * times + 1) + "px";
}
);

}
document.addEventListener("DOMContentLoaded", resize);
window.addEventListener("resize", resize);

#container {
  background-color: gray;
  width: 60%;
  margin: 0 auto;
  overflow: auto;
}

img {
  width: 150px;
  float: left;
}

<div id='container'>
  <img src='https://www.tomswallpapers.com/large/201610/75735.jpg'>
  <img src='https://www.tomswallpapers.com/large/201610/75735.jpg'>
  <img src='https://www.tomswallpapers.com/large/201610/75735.jpg'>
  <img src='https://www.tomswallpapers.com/large/201610/75735.jpg'>
  <img src='https://www.tomswallpapers.com/large/201610/75735.jpg'>
</div>
<!--</container>-->