Question

我需要创建类似这样的东西

ModelAdmin.get_queryset() method

出于个人原因，没有使用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>-->

在不使用CSS网格和不使用CSS Flex的情况下创建与此类似的内容

1 个答案: