Html 有图片的4至2栏网站

当宽度超过1000px时，我试图制作一个有4列响应的网站，如果宽度低于1000px，则制作2列响应的网站

!！[][1]

在图像上，您可以看到当显示器超过1000px时它的外观（1）。（2） 将浏览器宽度降低到1000px以下后的外观。（3）显示了当我添加图片时它是如何混乱的

\streed{
宽度：90%；
保证金：0自动；
}
#img{
宽度：80%；
}
#居中{
文本对齐：居中；
}
#集装箱1{
浮动：左；
宽度：100%；
填充：10px；
框大小：边框框；
溢出：自动；
}
#可乐{
浮动：左；
宽度：25%；
背景：红色；
填充：20px；
框大小：边框框；
}
#可乐{
浮动：左；
宽度：25%；
背景：黄色；
填充：20px；
框大小：边框框；
}
#可乐{
浮动：左；
宽度：25%；
背景：绿色；
填充：20px；
框大小：边框框；
}
#可乐{
浮动：左；
宽度：25%；
背景：蓝色；
填充：20px；
框大小：边框框；
}
@媒体屏幕和屏幕（最大宽度：500px）{
#散布{
宽度：100%；
}
#集装箱1{
浮动：左；
宽度：100%；
溢出：自动；
高度：自动；
}
#可乐{
浮动：左；
宽度：50%；
背景：红色；
}
#可乐{
浮动：左；
宽度：50%；
背景：黄色；
}
#可乐{
浮动：左；
宽度：50%；
背景：绿色；
}
#可乐{
浮动：左；
宽度：50%；
背景：蓝色；
}
}

第1列

第2列


正文
第3列

第4列

一个简单的方法是使用
flex
和
minwidth
或MediaQuery


最小宽度为250px的示例，每250px给出一个断点


#容器1{
显示器：flex；
柔性包装：包装；
}
#货柜1>分区{
最小宽度：250px；
弹性：1；
}
#集装箱1>部门img{
最大宽度：100%；
}
#可乐{
背景：红色；
}
#可乐{
背景：黄色；
}
#可乐{
背景：绿色；
}
#可乐{
背景：蓝色；
}

第1列
第2列

正文
第3列
第4列
`
GCyrillus为您提供弹性箱，我也更喜欢。这使得对齐块和给它们空间变得非常容易。关于媒体，你可以在这里查看小提琴，看看它是如何工作的

@media screen and (max-width:1000px){
  div{
    width: calc(50% - 10px);
  }
}

请尝试清理您提供的示例图片中的语言。是的。。。很抱歉，这是我孩子气的一面，想象一下，文本，而不是它，请：）你可以使用（@media screen and）来定义你想要的大小。谢谢你的帮助，我不知道这部分代码的作用：#container1>div{min width:250px；flex:1；}#container1>div img{max width:100%；}但是这个：#container1{display:flex；flex-wrap:wrap；}拯救了我的一天，谢谢：）@LukášJirůšek flex:1均匀地喷洒盒子，最小宽度使盒子在达到最小宽度时从下一行掉落，因此其他盒子会一直长到最后，再多一个盒子就太多了，依此类推。。