CSS 响应式设计为小屏幕隐藏一列

Question

这里是 CSS 初学者...

我正在尝试将我的网站更新为响应式 3 列布局。 我使用了来自 www.responsivegridsystem.com/ 的代码，一切运行良好。 只有一件事（目前！）我不知道如何实现。

目前，对于非常小的屏幕，这些列相互折叠，这很棒，但我希望第三列（右）也不要同时显示。

这是否可能使用 -- display: none; ——？？如果是这样，有人可以建议它应该放置在哪里来隐藏此列并且不打扰其他任何东西吗？ 我已经尝试过，但看不到如何执行此操作 - 我不确定是否可以在一个媒体查询中同时折叠列和隐藏一列。

非常感谢任何帮助，并对我缺乏知识表示歉意。 在此处查看完整页面代码：

https://jsfiddle.net/PIngu123456/76Lkpna0/

.span_3_of_3, .span_2_of_3, .span_1_of_3 { width: 100%; }

平谷

Answer 1

像这样修改代码中的最后一个媒体查询

    @media screen and (max-width: 480px) {
                      #header {
                        height: auto;
                      }
                      h1 {
                        font-size: 24px;
                      }
                      #nav {
                        width auto
                      }
                      /* DIV STYLES ====================================================================== */
                      /* MARGINS */
                      #header,
                      #content {
                        margin-bottom: 5px;
                      }

                      .span_1_of_3:nth-of-type(3){ //this add your column
                        display: none;
                      }

                      }

这是结果：jsfiddle

Answer 2

是的，您可以使用display 属性轻松完成此操作。我用所需的行为更新了您的 JSfiddle：https://jsfiddle.net/76Lkpna0/1/

代码：

在HTML的第三列添加一个额外的类：

<div class="col span_1_of_3 hidesmallscreen">

在小屏幕的媒体查询中添加此 CSS：

.hidesmallscreen {
                   display: none;
}

Answer 3

我建议您在该列中添加一个额外的类，例如.last-col 或其他东西。然后在媒体查询中，将display: none 设置为特定宽度。

@media only screen and (min-width : 500px) {
    .last-col {
       display: none;
    }
}

媒体查询是仅在特定条件下应用的样式。

Answer 4

您的 div 都具有相同的类标签 span_1_of_3。它们应该命名为span_1_of_3 span_2_of_3 span_3_of_3，以便您可以为它们指定不同的样式。

您对所有三个 div 都使用了 span_1_of_3，因为该类的样式为 width:32.26%，它为您提供了三列。实际上，span_2_of_3 是width:66.13%，span_3_of_3 是width:100%。因此，将所有三个跨度更改为 width:32.26% 以保持您的原始格式。

然后通过添加以下规则将 span_3_of_3 隐藏在您的 css 中的 @media only screen and (max-width: 480px) { 下：

.span_3_of_3 {
display: none;
}