4个cols适合1行@ width：每个

Question

我无法使用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 {
    width: 22.5%;
    margin: 2% 0 2% 2%;
}
#pg-19-2.panel-no-style {
    -webkit-align-items: flex-start;
    align-items: flex-start;
}
.panel-grid.panel-no-style {
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: nowrap;
    -ms-justify-content: space-between;
    justify-content: space-between;
}
@media only screen and (max-width: 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 {
    width: 47%;
    margin: 2% 0 2% 2%;
  }
  #pl-19 #pgc-19-2-3 {
      margin-right: 2%;
  }
}

<div id="pl-19">
    <div id="pg-19-2" class="panel-grid panel-no-style">
        <div id="pgc-19-2-0" class="panel-grid-cell">d1</div>
        <div id="pgc-19-2-1" class="panel-grid-cell">d2</div>
        <div id="pgc-19-2-2" class="panel-grid-cell">d3</div>
        <div id="pgc-19-2-3" class="panel-grid-cell">d4</div>
    </div>
</div>

    

但是，当视口宽度为780像素时，我在同一行上看到pgc-19-2-0，pgc-19-2-1，pgc-19-2-2，pgc-19-2-3 - 每个应该只有2列在该视口宽度处的行，由宽度设置：47％。

代码检查器显示正确设置了47％的宽度。

帮助表示赞赏。

Answer 1

您应该包装flex container以实现指定的布局。请尝试下面的代码。

@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;一起使用。希望它会有所帮助。

Answer 2

你有

wrap

对于媒体查询，您可以将它们更改为第一个选择器中的@media only screen and (max-width: 790px) { .panel-grid.panel-no-style { -ms-flex-wrap: wrap; flex-wrap: wrap; } } 或媒体查询内部，将它们设置为按照之前的建议进行换行。

#pl-19 #pgc-19-2-*

作为基于此HTML代码段的建议，我认为最好为所有ul

使用类而不是id＆＃39;

Answer 3

你必须像启动框架一样思考：使用min-width而不是max-width，你可以更好地控制从大桌面屏幕到关闭的断点。

其次，您以错误的方式使用flexbox：您将display: flex设置为父.panel-grid.panel-no-style容器，但未向其子容器指定正确的flex属性相反，您正在使用width属性。

您必须在flexbox或标准width-display-float方式之间进行选择。

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

standard way

如果你想要flexboxway，那就是这样：

flexbox way

为了看到行为，我添加了背景颜色和高度