我有一个针对Google Chrome的CSS问题.我做过一些研究,但没有人知道如何在没有Javascript的情况下修复它,我不想使用它,因为我的元素将来会改变.
代码如下,如果您使用它,您将看到子div到达页面的右侧,如果我向父母添加相同的顶部位置值,它将向相反方向移动.
该网站将有更多的内容,我想要一个居中的标题,当您滚动页面时,侧边栏和浮动的内容将消失在后面.
<body>
<!--this should not need any css coding till later on after the site is complete-->
<center>
<div class="header_p1">
<img class="header_p1_child" src="header.png"/>
</div>
</center>
而css是
.header_p1
{
background: white;
width: 750px;
height: 110px;
margin-bottom: 10px;
}
.header_p1_child
{
float: none;
background: white;
width: 750px;
height: 110px;
position: fixed;
top: 0px;
}
您希望将居中标题固定在页面顶部,以便对于较长的页面,内容将在标题下方垂直滚动.
这是原型HTML片段:
<div class="wrapper">
<div class="header">
<img class="banner" src="http://placehold.it/200x100" />
</div>
<div class="content">
<p>Lorem ipsum dolor ...</p>
</div>
</div>
我创建了一个div.wrapper块来定义布局的上下文,其中有一些填充等于头的预期高度.
该div.header块包含一个图像(200x100像素),并div.content包含各种文本段落.
布局和样式在以下CSS中定义:
.wrapper {
outline: 2px dotted blue; /** optional **/
/** Top padding so that initially, the content is below the header **/
padding-top: 100px;
}
.header {
height: 100px;
width: 400px; /** Use 100% to fill the width of the page **/
position: fixed;
top: 0;
left: 0;
right: 0;
margin: 0 auto;
background-color: rgba(0,0,255,0.2);
}
img.banner {
display: block;
margin: 0 auto;
}
的.header样式声明一个的高度和宽度,并使用position: fixed到引脚元件到观察口的位置.要进行定位,top: 0请将标题放在页面顶部.
要居中的元素,被设置left: 0和right: 0和使用margin: 0 auto.
在其中div.header,您可以将图像声明为块类型元素,然后使用它来居中margin: 0 auto.
我在Firefox和Chrome中都检查了它,它按预期工作.这依赖于CSS 2.1所以它应该可以在很多旧的浏览器中运行,也许IE7,但我没有测试它,但也许有人可以这样做并相应地评论.
小提琴: http ://jsfiddle.net/audetwebdesign/q2WRv/