0

我有 2 列布局，出于 SEO 原因，我希望 #navigation div 位于 HTML 中的主要 #content div 下方。

问题是 - 在某些页面上我想隐藏#navigation，所以#content 必须拉伸到 100%，但事实并非如此。.

这是基本代码

页面类型 1：

<div id="wrap">
    <div id="content"></div>
    <div id="navigation"></div>
</div>

页面类型 2：

<div id="wrap">
    <div id="content"></div>
</div>

CSS 

#wrap{
   position:relative;
}
#content{
   margin-right:200px;
}
#navigation{
   width:200px;
   position:absolute;
   right:0px;
   top:0px;
}

如果你想玩它：

http://jsfiddle.net/fWrAu/3/

我用 JS 修复它，但没有 JS 的用户会在页面类型 2 上看到右边距。
基本上我试图找到另一个HTML/CSS 解决方案。因为我的只是不工作。
任何帮助，将不胜感激。谢谢！

4

2 回答 2

1

在正常的页面html结构中是这样的：

<div id="wrap">
    <div id="conten">CONTENT</div>
    <div id="navigation">NAVIGATION</div>
</div>

CSS：

#wrap{
    position:relative;
    background-color:red;
    }
    #content{
        margin-right:200px;
        background-color:green;
    }
    #navigation{
        width:200px;
        position:absolute;
        right:0px;
        top:0px;
        background-color:blue; 
    }
    #content, #navigation {
        height:700px;
        font-size:24px;
    }

如果没有导航，让我们在“关于我们的页面” html 中说：

<div id="wrap">
    <div id="content" class="aboutUs">CONTENT</div>
</div>

然后添加这个CSS：

.aboutUs {margin-right:0 !important}

演示

希望这有帮助

于 2013-04-19T02:01:39.483 回答
0

您可以将内容的宽度设置为 100% 并将 z-index 设置在导航上方吗？

于 2013-04-19T00:46:41.423 回答