Question

我是一名新程序员，我正在制作一个包含HTML和CSS的网站，但我遇到了一个重大问题。我在页面上放置了图像（关闭BODY标记之前的图像），我希望它们保留在一个位置，但每当我调整浏览器大小时，它们就会开始遍布整个地方。我进行了搜索和搜索，但似乎没有任何帮助适用于我，与我的问题没有完全相关，或者只是太令人困惑。有些人甚至提出了同样的问题，但其他人试图回答似乎感到困惑或困惑，所以我发现他们没什么帮助。请帮忙，谢谢。

HTML低于......

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1      /DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>New Product</title>

<style>
body {background-image:url('gradient_back_ground_05.jpg');
background-repeat:repeat-x;}
</style>

<style type="text/css">

.textOverlay
{
position: relative; left: 375px; top: 1px;
}

</style>

<link href="zzv_styles.css" rel="stylesheet" type="text/css" />
</head>

<body>
<div class="picture">

<div class="textOverlay">

<h2><font color=white><font face="Arial, Helvetica, sans-serif"><em>We Proudly Presents<br />a   Brand New Product.</em></font></font></h2>

</div>
</div>

<div align="center"><img src="assets/zz_banner.jpg" alt="Banner" width="700" height="140"   /></div>
<p class="body_text"><img src="assets/info_box.png" alt="Information Box" width="350" height="500" hspace="5" vspace="5" border="0" align="right" />
<p class="body_text"><img src="assets/zz_logo.png" alt="Logo" width="350" height="125" hspace="5" vspace="5" border="0" align="left" />
<p class="body_text"><img src="assets/bulleted_info_box.png" alt="Bulleted Box 1" width="350" height="125" hspace="5" vspace="5" border="0" align="left" />
<p class="body_text"><img src="assets/bulleted_info_box.png" alt="Bulleted Box 2" width="350" height="125" hspace="5" vspace="5" border="0" align="left" />
<div align="center"><img src="assets/RN_footer.jpg" alt="Footer" width="700" height="110" /></div>

</body>
</html>

这是CSS

@charset "UTF-8";
/* CSS Document */

.image { 
   position: relative; 
   width: 100%; /* for IE 6 */
}

h2 { 
   position: absolute; 
   top: 30px; 
   left: 0; 
   width: 100%; 
}

Answer 1

我认为你想要一个包装器：http://jsfiddle.net/derekstory/QqKmR/

CSS

#wrapper{width: 800px; margin: auto;}

HTML

<div id="wrapper">
    <div class="picture">
        <div class="textOverlay">

<h2><font color=white><font face="Arial, Helvetica, sans-serif"><em>We Proudly Presents<br />a   Brand New Product.</em></font></font></h2>

        </div>
    </div>
    <div align="center">
        <img src="assets/zz_banner.jpg" alt="Banner" width="700" height="140" />
    </div>
    <p class="body_text">
        <img src="assets/info_box.png" alt="Information Box" width="350" height="500" hspace="5" vspace="5" border="0" align="right" />
        <p class="body_text">
            <img src="assets/zz_logo.png" alt="Logo" width="350" height="125" hspace="5" vspace="5" border="0" align="left" />
            <p class="body_text">
                <img src="assets/bulleted_info_box.png" alt="Bulleted Box 1" width="350" height="125" hspace="5" vspace="5" border="0" align="left" />
                <p class="body_text">
                    <img src="assets/bulleted_info_box.png" alt="Bulleted Box 2" width="350" height="125" hspace="5" vspace="5" border="0" align="left" />
                    <div align="center">
                        <img src="assets/RN_footer.jpg" alt="Footer" width="700" height="110" />
                    </div>
</div>

调整浏览器大小时图像正在移动

1 个答案: