Css 4列适合一行@宽度：每列47%

我在CSS媒体查询中将4列设置为视口宽度为790px或更小的2列时遇到问题

#pl-19#pgc-19-2-0、#pl-19#pgc-19-2-1、#pl-19#pgc-19-2-2、#pl-19#pgc-19-2-3{
宽度：22.5%；
利润率：2%02%2%；
}
#pg-19-2.无样式面板{
-webkit对齐项：flex开始；
调整项目：灵活启动；
}
.panel-grid.panel-no-style{
显示器：flex；
-ms-flex-wrap:wrap；
柔性包装：nowrap；
-ms-justify内容：间隔空间；
证明内容：之间的空间；
}
@仅介质屏幕和（最大宽度：790px）{
#pl-19#pgc-19-2-0、pl-19#pgc-19-2-1、pl-19#pgc-19-2-2、pl-19#pgc-19-2-3{
宽度：47%；
利润率：2%02%2%；
}
#pl-19#pgc-19-2-3{
保证金权利：2%；
}
}

d1
d2
d3
d4

您应该包装

柔性容器

，以实现指定的布局。请尝试下面的代码

@media only screen and (max-width: 790px) {
    .panel-grid.panel-no-style {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

另外，

.panel grid.panel no style

的CSS是错误的<代码>-ms flex wrap:wrap与

flex wrap:nowrap一起使用。希望能有所帮助。
你有

.panel-grid.panel-no-style {
    display: flex;
    -ms-flex-wrap: wrap; // this 
    flex-wrap: nowrap; // And this line do the same but have different values
    -ms-justify-content: space-between;
    justify-content: space-between;
}

对于媒体查询，您可以在第一个选择器中将它们都更改为
wrap
，或者在媒体查询中，按照前面的建议将它们都设置为wrap

@media only screen and (max-width: 790px) {
    .panel-grid.panel-no-style {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    }
}

根据这段HTML代码片段，我认为最好使用类而不是id作为所有
#pl-19#pgc-19-2-*
您必须像bootstrap框架一样思考：使用
最小宽度
而不是
最大宽度
您可以更好地控制从桌面大屏幕向下的断点

其次，您以错误的方式使用flexbox：您被设置为父级
面板网格。面板无样式
容器，但您没有为其子级指定正确的
flex
属性，而是使用
宽度
属性

您必须在flexbox或标准宽度显示浮动方式之间进行选择

如果您想要标准方式，这是css的正确实现：


如果您想要flexboxway，请选择以下方式：


我添加了背景色和高度，只是为了查看1的行为
在某些类中，您有双引号
“
”