我创建了一个简单的页面,用于通过 jquery/ajax 处理三个表单。一切正常,但不知何故我似乎无法调试这个简单的 CSS 问题。我有一个父 DIV,里面有三个 DIV,每个 DIV 都包含一个表单和提交表单时的相关成功消息。如果有人可以看看它,我将不胜感激。你可以在这里找到它(链接)。样式表可以通过源码看到,真的很简单。我在下面包含了页面架构的要点和我编写的一些 CSS。
HTML
<div id="wrap">
<div class="form-container">
<form></form>
<div class="success">
<p>Form Success!</p>
</div>
</div>
<div class="form-container">
<form></form>
<div class="success">
<p>Form Success!</p>
</div>
</div>
<div class="form-container">
<form></form>
<div class="success">
<p>Form Success!</p>
</div>
</div>
</div>
CSS
#wrap{
width:900px;
height:450px;
margin:25px;
padding:0;
}
div.form-container {
background:#9c9;
width:300px;
height:100%;
float:left;
position:relative;
padding:0;
}
div.success{
background:#ffa07a;
padding:0;
margin:0;
width:100%;
height:100%;
}
form {
background:#999;
float:left;
position:relative;
padding:10px;
}
您会注意到第二个和第三个表单容器的顶部有 19px 的边距,但这在 CSS 中的任何地方都没有体现。我一直试图调试这个几个小时无济于事。我几乎不好意思寻求帮助,因为我知道这一定很简单。我已经移动了几乎所有元素以找到问题,但没有任何改变!我可以使用负边距将两个容器拉起,但我认为我不需要这种修复。
谢谢参观,
麦克风