Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/css/35.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 在不使用css网格和css flex的情况下创建类似的内容_Javascript_Css - Fatal编程技术网

Javascript 在不使用css网格和css flex的情况下创建类似的内容

Javascript 在不使用css网格和css flex的情况下创建类似的内容,javascript,css,Javascript,Css,我需要创造这样的东西 没有使用CSS网格,或者由于个人原因没有使用CSS flex,在某些情况下,我对这些方法有很多问题,是的,它们确实会生成 类似的事情,但在某些情况下,他们让我失望了。如果你们可以提供自己的代码方法,说明在不使用CSS网格或CSS flex的情况下如何实现这一点,请给我一个代码示例。我想知道我是否只能用CSS来做这件事,还是 你必须使用JavaScript来实现这一点吗?如果是这样的话,我也不介意。忽略那个黑色的东西,我正试图重新创建那个灰色容器,这些图像如何在灰色容器中自

我需要创造这样的东西

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

类似的事情,但在某些情况下,他们让我失望了。如果你们可以提供自己的代码方法,说明在不使用CSS网格或CSS flex的情况下如何实现这一点,请给我一个代码示例。我想知道我是否只能用CSS来做这件事,还是

你必须使用JavaScript来实现这一点吗?如果是这样的话,我也不介意。忽略那个黑色的东西,我正试图重新创建那个灰色容器,这些图像如何在灰色容器中自我调整,还有最后一件事,不使用媒体查询,我知道不使用它们也是可能的。这就是我被困的地方

/*我必须为此使用JavaScript吗?是或否???*/
/*我还需要添加什么*/
#容器{
背景颜色:灰色;
宽度:40%;
}
img{
宽度:150px;
}

这里有一种方法,使用调整大小事件侦听器和一些数学:

function resize(){
var w=parseFloat(getComputedStyle(document.body).width)*0.6;
var时间=数学四舍五入(w/150);
var iw=w/次;
Array.prototype.forEach.call(
document.queryselectoral(“#container img”),
功能(img){
img.style.width=iw+“px”;
document.querySelector(“#container”).style.width=(iw*乘以+1)+“px”;
}
);
}
document.addEventListener(“DOMContentLoaded”,调整大小);
addEventListener(“调整大小”,调整大小)
#容器{
背景颜色:灰色;
宽度:60%;
保证金:0自动;
溢出:自动;
}
img{
宽度:150px;
浮动:左;
}


如果您调整的是窗口大小,那么可能吗?这里有一种方法:我有一种感觉,无论您尝试什么,都会遇到问题。最好学习如何正确使用CSS-
flexbox
grid
以及所有这些-并了解如何解决它们的局限性,而不是构建您自己的伪系统,该系统可能具有不同的局限性,这些局限性更难看到,更难调试,人们可以为您提供的帮助更少
flexbox
很容易理解,您可以在Stack Overflow上发布相关信息,并确保获得帮助。你的定制解决方案不是这样的。天哪,克里斯G,这就是我要找的=)它给了我想要的效果,就像那张gif图像一样。你能提供一个简单的JavaScript版本吗?@fsofb Done:)但是你不应该仅仅因为过去有什么失败就把自己限制在黑客的解决方法上。嘿,克里斯G,我提供了你的代码使其在IE中工作。如果您能批准我对您的代码进行的编辑,那么现在它在IE上工作。因此,如果将来的读者发现此方法有用,则可以使用此方法。一旦您这样做,我将奖励您获得最佳答案。最后一件事Chris G非常感谢您的帮助,我真的非常感谢您的帮助。@fsofb我现在才开始做这件事,但看到了您的编辑并批准了它:)谢谢Chris G的每一件事。我现在正在使用你的方法做一些令人惊奇的事情,但是我有一篇关于你的方法的新帖子,因为我在你的方法中添加了更多的东西,如果你对更多的点感兴趣,那么如果你想的话,请点击这个链接