我有 2 列布局,出于 SEO 的原因,我希望 #navigation div 位于 HTML 中主要 #content div 的下方。
问题是 - 在某些页面上我想隐藏#navigation,所以#content 必须拉伸(stretch)到 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 结构中是这样的:
<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}
关于html - 两列布局,#navigation 在右边,但在 html 中的#content 下面?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16095325/