Css 指导我的网站设计。。我使用AJAX来更新数据库；“幕后”；

我有一个网站，我希望下面的页面能够正常工作-它目前可以很好地进行完整的页面刷新（因为每个div都是从数据库填充的）-但是我开始在AJAX中构建，以便在浏览器不离开页面的情况下更新页面后面的数据库。下图显示了我想要实现的目标。刷新整个页面可能会有点慢，因为标题信息和项目信息可能有很多图像等

我可以通过让我的表单提交按钮在每个div区域中写出结果来让它正常工作，但是当用户返回页面时，我希望它显示页面的最新版本。是否有办法更改表单上“提交”按钮的功能（即按下时-刷新网页的“猜测”和“猜测信息”分区）

我对表单的AJAX/Jquery是：

<script type="text/javascript">
$(document).ready(function(){
    $("#myform").validate({
        debug: false,
        rules: {
            guess: {
                min: 0,
                number: true
            }
        },
        messages: {
            guess: "Please enter a valid guess.",
        },
        submitHandler: function(form) {
            // do other stuff for a valid form
            $.post('process.php', $("#myform").serialize(), function(data) {
                $('#results').html(data);
            });
        }
    });
});
</script>

$（文档）.ready（函数（）{
$（“#myform”）。验证({
调试：错误，
规则：{
猜测：{
分:0,，
数字：对
}
},
信息：{
猜测：“请输入有效的猜测。”，
},
submitHandler:函数（表单）{
//为有效的表单做其他事情
$.post（'process.php'，$（“#myform”）.serialize（），函数（数据）{
$（'#results'）.html（数据）；
});
}
});
});

php只接受表单输入（例如item_id、user_id、guess），并更新数据库以获取新信息

我在CSS方面也有困难，我的页眉和页脚是由wordpress生成的，但是下面详细介绍的所有分隔符都是我自己的（我把它们放在“内容”分隔符中）

我已经设法将“内容”分为3列，但我正努力将中间的列分为所示的部分

所以我的“内容”分隔符是900px，所以我的“中间”是500px，每列是200px

---

所以现在我想把我的500px列分成3行（可以根据需要长），第一行一列500px，第二行2列，比如150px（缩略图是100px宽）350px，最后一行将被拆分，比如100px，100px，300px。有人能给我建议吗？我已经尝试了很多CSS教程，但我似乎很难让它们彼此重叠！！：（

关于提交按钮，有一些方法可以禁用它的默认设置

第一个是

<form action="whatever" method="whatever" onsubmit="return myJSFunction();return false;">

请记住，如果js函数中的一切正常，则需要返回false。如果返回true，则可能会触发提交按钮的默认调用。 一旦您这样做了，您就应该调用AJAX请求并在js中编写/重写html

关于css，我不明白为什么它不起作用，所以我会给你一个默认的解决方案（以下div应该放在你的“中间”容器中）：

我在我的编辑器中测试了这一点，它似乎起了作用。不用担心我用它们来获得一些可见性的颜色。 很抱歉CSS是内联的，但只需复制样式属性并放入.CSS页面即可

如果你想让你的每一行（被分割的那一行）与它们的相邻行具有相同的高度，你需要稍微改变css并使用一些不同的技巧（但是你必须选择哪一行具有最大的高度）

---

希望这有帮助。

谢谢：）如果可能的话，我可以让溢出的行保持相同的高度-缩略图将是一个设定的高度，因此最大的将是描述，至于最下面的行-这些div中的动态内容较少（始终是一个设定的行数）因此，我不认为这是一个问题。我不确定我是否理解您答案中的提交按钮，我仍然希望提交按钮将表单提交到process.php，但与其在div中写出php中的任何“回声”，不如刷新页面的一部分，我不遵循上面的说明：（是的，所以我认为您只希望刷新div，而不希望刷新页面。默认情况下，您必须阻止表单提交内容，因为它将重新加载整个页面。您应该创建一个PHP page process.PHP，并通过JavaScript变量发送POST/GET值（如果有任何内容要发送的话）在AJAX请求中。在您的响应中，您将用一个回显的内容覆盖您的DIV html内容（到响应javascript变量）在process.php页面中。提交表单不会重新加载整个页面，当我单击submit时，它只会将process.php的输出写入到.My process.php中。它是服务器上的一个单独页面，使用表单变量-我所引用的文章是这样的，但当我刷新页面时-该行消失-因此我希望该行为b这是一个标准的行，它总是在那里，但是在提交后会被刷新-如果可能的话？？很抱歉有多条评论！！继续按enter键进行换行！！如果你看我发送的链接-你可以看到我的问题-当你刷新页面时，process.php的结果会消失-理想情况下，我想要这个p的结果要在页面上显示的进程-我修改了php，将变量添加到数据库中，而不仅仅是打印它们。。

<form action="whatever" method="whatever" onsubmit="return myJSFunction();">

if(!event) var event = window.event //to prevent browser problems
event.preventDefault();

<div id="item_info" style="width:500px; height:50px;background-color:green"></div>
<div id="description" style="float:right;width:350px;height:100px;background-color:blue"></div>
<div id="thumbnail" style="width:150px;height:100px;background-color:red"></div>
<div id="guess_info" style="float:right;width:300px;height:100px;background-color:black"></div>
<div id="item2" style="float:left;width:100px;height:100px;background-color:yellow"></div>
<div id="guess" style="float:left;width:100px;height:100px;background-color:pink"></div>