ajax应用程序中css页面布局的问题答案

【问题标题】：Problems with layout of css page in ajax applicationajax应用程序中css页面布局的问题
【发布时间】：2010-10-21 14:07:55
【问题描述】：

我有一个 css 样式，当应用于静态 html 页面时效果很好。

问题是，内容是动态加载的，进入第 3 层，然后进入第 2 层。

我不太了解一致性。有时这些层相距很远，有时它们相互网格化。

为什么会发生这种情况，如何才能将 layer3 保持在静态位置？

层相距很远的示例：

<html><head>
<title>Test page</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<div id="Layer0">
<div id="Layer1" class="Layer1">
<h3 align="left">A menu</h3>
<div align="left">
<ul class="BLUE">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
</ul>
</div>
</div>
<div id="Layer2">
<div id="leftlayer" class="leftlayer">
<form name="searchForm">
An example form: 
<input name="search" type="text">
<br>
<input name="Submit" value="Update" onclick="searchUserInfo('parallelimport');return false" type="submit">
</form>
</div></div>
<div id="Layer3"><h1> Why is the layer so far away?</h1>
</div>
</div>
</div>
</body></html>

合并图层的示例

<html><head>
<title>Test page</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<div id="Layer0">
<div id="Layer1" class="Layer1">
<h3 align="left">A menu</h3>
<div align="left">
<ul class="BLUE">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
</ul>
</div>
</div>
<div id="Layer2">Content goes here</div>
<div id="Layer3">
<h1>Why is the layer up here now?</h1>
<table width="100%" border="0">
<tbody>
<tr>
<td width="15%">This wrecks</td>
<td width="10%">The very</td>
<td width="65%">Layout of the page</td>
</tr>
</table>
</div>
</div>
</div>
</body></html>

我正在努力实现的一个例子：

<html><head>
<title>Test page</title>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<div id="Layer0">
<div id="Layer1" class="Layer1">
<h3 align="left">A menu</h3>
<div align="left">
<ul class="BLUE">
<li><a href="#">item 1</a></li>
<li><a href="#">item 2</a></li>
</ul>
</div>
</div>
<div id="Layer2">
<h1>I would like information to be here</h1>
<div id="Layer3">
<h1>And then the table to be below the above info</h1>
<table width="85%" border="0">
<tbody>
<tr>
<td width="15%"><strong>This is</strong></td>
<td width="20%"><strong>much better</strong></td>
</tr>
</tbody>
</table>
<h1>I would like the Layer 3 to always be in a constant position</h1>
<h1>Does this mean I should have it outside of Layer2?</h1>
</div>
</div>
</div>
</body></html>

我的 CSS：

#Layer0 {
  width: 100%;
  height: 100%;
}

body{
margin:10px 10px 0px 10px;
padding:0px;
color:#999999;
font-family:"Trebuchet MS",arial,sans-serif;
font-size:70.5%;

}

#Layer2 {
background:#fff;
color:#000;
voice-family: "\"}\"";
voice-family: inherit;
padding:20px;

}

#Layer2 p {color:#888;}

#Layer2 a, a:link { color:#006633; text-decoration: none;}

#Layer2 a:hover, a:active{ color:#FF6666; text-decoration: none;}

html>body #Layer2 {
}

p,h1,pre {
margin:0px 10px 10px 10px;
font:Arial, Helvetica, sans-serif;
font-size:12px;
line-height: 1.6em;
text-align:justify;
text-decoration:none;
}

h1 {
font-size:2.5em;
text-align: center;
color:#ccc;
padding-top:15px;

}

h3 {
font-size:14px;
color:#999;

}

.leftlayer {
  float: left;
  left: 20%;
  width: 20%;
  height: 100%;
  margin-right: 10%;
}
.leftlayer strong {
  text-align: left;
}
.leftlayer2 {
  float: left;
  width: 20%;
  height: 100%;
  margin-left: 2%;
}
#rightlayer {
  float: left;
}
#Layer3 {
  float: bottom;
}

【问题讨论】：

标签： html css ajax

【解决方案1】：

当您遇到棘手的 CSS 问题时，为各种布局元素添加边框确实有助于调试。例如，如果您将以下内容添加到您的 .leftlayer CSS 类中，您将看到您发布的第一个示例有什么问题：

 border: 1px dashed #ccc;

您会注意到，用 class="leftlayer" 包围表单的 div 将第 3 层推向右侧。这是因为 leftlayer div 在 HTML 流中出现在 Layer3 div 之前。为了得到更好的结果，把Layer3移到.leftlayer上面，像这样：

<div id="Layer3">
    <h1> Why is the layer so far away?</h1>
</div>
<div id="Layer2">
    <div id="leftlayer" class="leftlayer">
        <form name="searchForm">
            An example form: 
            <input name="search" type="text">
            <br>
            <input name="Submit" value="Update" onclick="searchUserInfo('parallelimport');return false" type="submit">
        </form>
    </div>
</div>

我不确定这是否正是您需要实现的目标，但这是一个开始。

浮动确实会影响您的布局，因此有助于彻底理解盒子模型。我发现这是一篇很棒的参考文章：http://www.brainjar.com/css/positioning/default.asp

【讨论】：