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

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

代码：

在 HTML ：

中的第三列添加额外的课程

<div class="col span_1_of_3 hidesmallscreen">

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

.hidesmallscreen {
                   display: none;
}

Answer 2

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

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

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

Answer 3

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

    @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 4

您的div都具有相同的类标记//filename: get.php <?php $servername = "localhost"; $username = "root"; $password = ""; $dbname = "database"; // Create connection $conn = new mysqli($servername, $username, $password, $dbname); // Check connection if ($conn->connect_error) { die("Connection failed: " . $conn->connect_error); } $productId = filter_input(INPUT_POST, 'id', FILTER_SANITIZE_NUMBER_INT); $query = 'SELECT price FROM forms WHERE id=' . $productId; $res = mysql_query($query); if (mysql_num_rows($res) > 0) { $result = mysql_fecth_assoc($res); print($result['price']); die(); } ?>。它们应该命名为span_1_of_3，以便您可以为它们分别设置样式。

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

然后通过添加以下规则在width:32.26%下的css中隐藏span_3_of_3：

@media only screen and (max-width: 480px) {

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

4 个答案: