Question

我正在尝试将我的网站转换为适合移动设备的网站。我认为最简单的方法是在移动视图中隐藏某些部分并显示主要内容。该网站一般划分如下：

<div class="main">
    <div id="header_holder">
    HEADER CONTENT
    </div>
    <div class="side">
       <cfinclude template="menu.cfm">
       <div class="sidebot">Title 1</div>
       <div class="space10">image 1</div>
       <div class="space10">image 2</div>
       <div class="space10">image 3</div>
       <div class="sidebot">Title 2</div>
       <div class="lineG2"></div>
       <div class="sidebot">Title 3</div>
    </div>
    <div class="content">
        <div class="cLeft">
         MAIN CONTENT 
        </div>
        <div class="cRight">
            right content 1
            right content 2
            <cfinclude template="ads.cfm">
        </div>       
    </div>
    <div class="footer">
     footer content
    </div>
</div>

CSS：

.main{width:960px;margin:0 auto;overflow:hidden;zoom:1}
.side{
    float:left;
    width:110px;
    margin-right:10px;
    }
.sidebot{float:left;width:110px;padding-top:20px;font-weight:bold;}
.content{width:840px;float:left}
.content .cLeft{float:left;width:530px;margin-right:10px;}
.content .cRight{float:left;width:300px;margin-bottom:10px;}
.lineGrey {
border-top: 1px solid #C1C1C1;
list-style-type: none;
padding:20px 0px;
overflow: hidden;
width: 100%;
height: 220px;
}
.space10{float:left;margin-top:10px;}

我想隐藏左侧（＆＃34;侧＆＃34;）和右侧（＆＃34; cRight＆＃34;），在移动视图中保留MAIN CONTENT原样。根据说明，我应该能够通过使用@media这样做：

@media screen and (max-width: 530px) {
.side{
    visibility: hidden;
    clear: both;
    display: none; 
    float:left;
    width:110px;
    margin-right:10px;
    }
}

嗯，它确实隐藏了＆＃34; side＆＃34;在移动模式下，即当它小于530时。但是，它搞砸了原始桌面格式。＆＃34; side＆＃34;菜单在左侧正确显示，但＆＃34;侧面的其余部分＆＃34;含量：

       <div class="sidebot">Title 1</div>
       <div class="space10">image 1</div>
       <div class="space10">image 2</div>
       <div class="space10">image 3</div>
       <div class="sidebot">Title 2</div>
       <div class="lineG2"></div>
       <div class="sidebot">Title 3</div>

转到左侧主要内容的顶部＆＃34; cLeft＆＃34;。类似的问题与＆＃34; cRight＆＃34;在桌面模式下，当我用它包装时：

@media screen and (max-width: 530px) {
.content .cRight{
    visibility: hidden;
    clear: both;
    display: none; 
    float:left;
    width:300px;
    margin-bottom:10px;
    }
}

一些cRight内容

            right content 2
            <cfinclude template="ads.cfm">

转到左侧主要内容的底部＆＃34; cLeft＆＃34;。我迷失了所发生的一切。为什么它会搞乱桌面模式格式？

Q2。如果我们解决这个问题，那么旧版本的CSS会使用吗？即在较旧的浏览器中IE 7？

感谢任何帮助。

Answer 1

我不能100％确定您的问题是什么，但如果您正在尝试删除内容，cRight和side div，那么只需将此代码粘贴到桌面CSS下方即可。

浏览器从上到下读取CSS，所以如果你在显示器下面添加所有其他代码：none，那么你将会得到一些不同于display：none的结果，因为CSS是从上到下阅读的。< / p>

希望这有帮助

@media screen and (max-width: 530px) {
.side{
visibility: hidden;
clear: both;

float:left;
width:110px;
margin-right:10px;
display: none; 
}
.content .cRight{
visibility: hidden;
clear: both;

float:left;
width:300px;
margin-bottom:10px;
display: none; 
}
}

在移动和Google搜索上隐藏DIV部分并翻译

1 个答案: