Question

图像 - enter image description here

代码 -

<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将文本向下推，即调整标题大小。

任何想法如何解决这个问题？

Answer 1

呵呵，你需要重写所有代码：）

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

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

放入内部包装头div，而不是将标题宽度设置为100％。

制作网站，移动文本，即调整标题大小

1 个答案: