1

图片 -在此处输入图像描述

代码 -

<html>
<header>
<style>
body {
margin: 0px 0px 0px 0px;
    font-family: Arial, Helvetica, sans-serif;
background-image:url('http://www.wallpaperpimper.com/wallpaper/Landscape/Plants/Leaf-In-Front-Of-Blur-1-1600x1200.jpg');
background-attachment: fixed;
background-size:cover;
}
p {
color:#fff;
}
#navi {
position: fixed;
    top: 0;
    left: 0;
    z-index: 99;
    height: 25px;
    font-size: 15px;
    width: 100%;
    z-index: 1000;
    background-color:#505050;
    padding-top:3px;
    padding-left:2px;

}
#wrapper {

width:100%;
height:100%;

}
#header {
Width:76%;
height:20%;
background-color:   #303030 ;
margin-top:3%;
margin-left:12%;
background-image:url('http://www.browsewallpapers.com/files/winter-landscape-landscape-7452.jpg');
background-size:cover;
text-align: right;
}
#content {
Width:50.5%;
Height:100%;
background-color:   #303030 ;
margin-left:12%;
margin-top:0.5%;
float:left;
opacity:0.8;

}
#sidecontent {
float:right;
background-color:   #303030 ;
width:25%;
height:40%;
margin-right:12%;
margin-top:0.5%;
opacity:0.8;
}
</style>
</header>
<body>


        <div id="navi">
            <p> HELLO </p>
        </div>

        <div id="wrapper">
            <div id="header">
                <p>Daily call</p>
            </div>
            <div id="content">
                <p> THIS IS DOG</p>
            </div>
            <div id="sidecontent">
                <p>no this is This is patrick</P>
            </div>
        </div>

</body>
</html>

在 Opera、chrome 和 firefox 中一切正常，将文本向下推，即调整标题的大小。

知道如何解决这个问题吗？

4

1 回答 1

0

呵呵，你需要重写你所有的代码:)

如果您想将内容块居中，只需设置宽度和边距自动。例子：

.wrapper { width: 900px; margin: 0 auto;}

比放入包装标题 div 中，而不是将标题宽度设置为 100%。

于 2012-09-14T11:52:29.740 回答