Question

我正在设计一个网页，并希望无论屏幕大小如何，布局都保持不变。我已经看过POSITION变量，如固定，绝对和相对以及解释，但无法找到明确的答案。我认为这与嵌套部门有关。有人可以给我一个更明确的答案吗？感谢

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
        <link href='http://fonts.googleapis.com/css?family=Satisfy' rel='stylesheet' type='text/css'>
        <title></title>Test
        <style type="text/css">
            body
            {
                margin:0;
                padding:0;
                width:1300px;
                height:650px;
                color: black;
                position:relative;
                font-family: 'Satisfy', cursive;
                background: #F4EEFE url(backgrounds/linen2.jpg) center center fixed no-repeat;
            table td { border:0;vertical-align:top; }
#main {margin:0 auto;}
table.master {position:absolute;width:100%;height:100%;}
td.david {position:relative;}
td.richard {position:relative;vertical-align:bottom;}
td.forBackground{vertical-align:middle;}
td.middle{height:100px;}
#david{margin-top:10%;}
#richard{margin-bottom:15%;}
img.top{z-index:999;}
#button{z-index:999;display:block;text-decoration:none;bottom:2px;     height:25px;clear:both;float:right; margin-left:47%; position:fixed; border:0px; padding:0px;}
img.davidbio{z-index:999;display:block;text-decoration:none;bottom:15%; height:200px;width:250px;clear:both;float:left; margin-left:11%; position:fixed; border:0px; padding:0px;}
        </style>
</head>
<body>
<div id="container" class="container">
<div id="background-image" class="background-image"></div>
<div id="content">
<center>
  <table class="master" border="0">
    <tr>
      <td width="20%" class="david"><div id="david"><?php include('david.php'); ?></div>                   </td>
      <td width="55%" class="forBackground">
<div id="main" class="main">
<center>
<table class="background" border="0">
    <tr>
        <td>
        </td>
    </tr>
    <tr>
        <td class="middle"><center><br/><br/><font size="5">Text here</font>   <br/><font size="7">Names here</font></center></td>
    </tr>
    <tr>
        <td class="middle"><center><img src="heart.png" title="" alt="" width="200px" height="150px" /></center></td>
    </tr>
    <tr>
        <td class="middle"><center><font size="5">Date<br/>
        Time<br/>
        Location</font></center></td>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
    <tr>
        <td>
        </td>
    </tr>
</table>
</center>
</div>
    </td>
    <td width="20%" class="richard"><br/><br/><br/><div id="richard"><?php    include('richard.php'); ?></div></td>
  </tr>
</table>
</center>
</div>
<input type="button" name="button" id="button" class="button" value="&nbsp;Click Here;" onClick="MyWindow=window.open('input.php','MyWindow','toolbar=no,location=no,directories=no,status=no,menubar=no,scrollbars=no,resizable=no')" style="color:#F7D358;background-color:#D33033;border:1px solid;
border-top-right-radius:2em;
border-top-left-radius:2em;
border-bottom-right-radius:2em;
border-bottom-left-radius:2em;"></button>
<img src="davidbio.png" class="davidbio" alt="" title=""/>
</div>
</body>
</html>

Jsfiddle：http://jsfiddle.net/9hdz2/1/

Answer 1

如果您希望所有元素保持在窗口大小相同的位置，则需要将所有这些元素包装在标记中（例如div）并赋予其固定宽度。

例如（假设容器的id为#container），CSS：

#container{
    width:960px;
    margin:0 auto; /*this is to horizontaly center the element 
                     in the window if the window is wider than 960px/*
    }

然后，您需要对其中的元素使用相对或静态（默认）定位，并且可以使用百分比，因为它们是在固定的父维度上计算的。

如果给#container一个相对位置，也可以使用绝对定位。

为了您的目标，我会避免使用固定定位元素，因为它们的位置是根据窗口计算的，因此不会遵循#container流程。

这个解释很简单，所以我强烈建议你仔细查看CSS定位的更全面的定义。

你可以在这里找到一些：

CSS positioning overview

在窗口调整大小时强制页面布局

1 个答案: