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

Question

CSS的初学者在这里...

我正在尝试将我的网站更新为响应式 3 列布局。我使用了 www.responsivegridsystem.com/的代码，一切正常。只有一件事（目前！我无法弄清楚如何实现。

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

这是否可能使用 -- 显示：无; -- ??如果是这样，有人可以建议它应该放在什么地方以隐藏此列而不会干扰其他任何东西吗？我已经尝试过，但看不到如何做到这一点 - 我不确定是否可以在一个媒体查询中同时折叠列并隐藏一列。

非常感谢任何帮助，并为我缺乏知识而道歉。在此处查看整页代码：

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

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

品古

Answer 1

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

法典：

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

<div class="col span_1_of_3 hidesmallscreen">

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

.hidesmallscreen {
                   display: none;
}

Answer 2

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

    @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 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%以保持原始格式。

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

.span_3_of_3 {
display: none;
}