Question

我的网站的每个页面都有<div class="rightside">。它在每个页面上定位一个联系表单，然后在850像素宽屏幕上（为了响应）它将联系表单隐藏到display: none;

@media only screen and (max-width : 850px) {
.rightside {
    display: none;
} 
}

在联系我们页面上，我想仅为此页面提供联系表格。如何更改联系我们页面，以便联系表格仍然可用于850以下的设备与我们联系，但在其他每个页面上display: none;？

更新我希望在我的CSS中使用.rightside的属性。我试过了：

<div class="rightside" id="contactpage"> in contact page

在媒体查询850

.rightside #contactpage  {
   float: left;
}

Answer 1

在你的HTML上，你可以为你想在某一点之后消失的所有右侧div添加一个额外的类，然后只使用CSS选择器来删除这些div。更改所有响应式div上的HTML标记，以便<div class = "rightside>代替<div class = "rightside responsive">而不是.rightside.responsive。这会为div添加一个额外的类，称为响应式，从此处您只需在媒体查询中使用.rightside而不是#contactpage选择包含此类的div。

<强>更新

您最近更新的代码不起作用的原因是因为.rightside和{{1}}之间有空格。通过在两个选择器之间没有空格，您选择的是同一级别的元素，并且您的代码应该可以工作。

Answer 2

尝试在现有代码之后添加另一个css样式，如下所示：

<div class="rightside contact"></div>


@media only screen and (max-width : 850px) {
    .rightside {
        display: none;
    }
    .rightside.contact {
        display: block;
        float:right;
    } 
}

如何为特定页面不同地定位div？

2 个答案: