2

我的网页由两部分组成：一个将调整大小以适应任何窗口大小的图像，然后是一个带有 4 个文本框的表单，位于图像顶部的特定位置。

我的问题是文本框在窗口调整大小时移出位置。我已经花了 6 个多小时在 css 和 jquery 中尝试一切，但我什么也做不了。

http://jsfiddle.net/ndqna/

<!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>
<title></title>
<style type="text/css">
    body
    {
        margin: auto;
        width: 100%;
    }

    .Wrapper
    {
        position:relative;
        min-width: 500px;
        width: 100%;
        margin:auto;
    }

    .Image
    {
        max-width: 1150px;
        max-height: 1453px;
        width: 100%;
    }

    .Form
    {
        position: relative;
        top:-260px;
        left: 200px;
        width: 130px;
        border: solid 1px #000;
    }
</style>
</head>
  <body>
      <div class="Wrapper">
        <div>
            <img src="image.png" class="Image" />
        </div>
        <div class="Form">
            <input type="text" />
            <br />
            <input type="text" />
            <br />
            <input type="text" />
            <br />
            <input type="text" />
        </div>
    </div>
 </body>
</html>

全窗口：在此处输入图像描述

调整大小的窗口：在此处输入图像描述

4

2 回答 2

2

首先，您应该为包装器设置最大尺寸，并使图像占据 100% 的宽度。此外，您应该将表单定位为绝对而不是相对，并将其从底部定位。像这样的东西：http: //jsfiddle.net/ndqna/2/

话虽如此，效果还不是100%完美无瑕。随着图像的缩放，表格的位置需要改变。您可以尝试使用百分比来接近该位置。像这样的东西：http: //jsfiddle.net/ndqna/3/

.Form
{
    position: absolute;
    bottom: 10%;
    left: 15%;
    border: solid 1px #000;
}

你会注意到它仍然不完美。如果您真的想要精确定位，则需要编写一些脚本来计算精确位置。然而，在开始编写 jQuery 代码之前，为什么不将“框”设置为表单的背景，并通过分割源图像将其从页面的背景图像中删除？这样定位不需要像素完美，因为盒子会随着表格移动......

于 2013-04-11T18:58:08.707 回答
1

这可能是因为你的包装器 css。尽量不要使用最小或最大宽度，只需使用固定宽度。

.Wrapper
    {
        position:relative;
        width: 945px;
        margin:auto;
    }

小提琴

于 2013-04-11T18:33:31.927 回答