Php 如何制作聊天室&x27；s出现在彼此下方

我正在做一个小聊天，我有问题使div的出现在彼此下面。这就是我所拥有的：

$i = 0;
while($i < 5)
{
echo "<div class='MyChatholders'>";
 echo "<div class='pro_pic'>";
  //my image
 echo "</div>";
echo "<div class='ChatInfo'>";
//my information
echo "</div>";
echo "</div>";
echo "<br />";

$i++;
}

请注意，（while函数）只是模拟从数据库中提取的信息。

现在我的问题是所有的部门都在一个位置上。我想让它们互相落下。我不明白为什么会这样。有人能帮我写代码并解释原因吗

我已经看过这个解决方案，但它对我不起作用

让它使用

\n

将您的

标记打印到循环中的新行

$i = 0;
while($i < 5)
{
echo "<div class='MyChatholders'>\n";
 echo "<div class='pro_pic'>\n";
  //my image
 echo "</div>\n";
echo "<div class='ChatInfo'>\n";
//my information
echo "</div>\n";
echo "</div>\n";
echo "<br />\n";

$i++;
}

$i=0；
而（$i<5）
{
回音“\n”；
回音“\n”；
//我的形象
回音“\n”；
回音“\n”；
//我的信息
回音“\n”；
回音“\n”；
回显“
\n”；
$i++；
}

编辑语法错误，

\n

需要在引号内

---

第二次编辑我的错误，

\n

不是HTML，它不会工作。您可以根据

添加

清除：两者皆有，使用

添加到聊天室。添加

位置：相对到您的
div
s

根据您的代码使用小提琴：

注意：提琴中的边框用于演示

div.MyChatholders {
    position: relative;
    left: 5px;
    color: black;
    width: 290px;
    height: 100px;
    border-radius: 10px;
}
div.pro_pic {
    position:relative;
    left: 5px;
    width: 30px;
    height: 30px;
}
div.ChatInfo {
    position:relative;
    color: black;
    font-size: 14px;
    left: 40px;
    width: 245px;
}

听起来你的聊天记录持有者可能是绝对定位的，导致他们互相堆叠，因为他们在屏幕上的XY坐标完全相同。你能核实一下吗？是否有其他CSS样式应用于MyChatholders

div？是否有更多CSS可能涉及？如图所示，这确实会产生一个垂直的div列表。这是非常不可能的-您是否向检查器检查了聊天记录持有者的所有计算样式？我试图用一把小提琴来复制你的问题（），运气不好。CSS可以通过各种方式影响那些div，但没有明确提及它们——影响MyChatholders父母子女的规则，等等。@PaulRoub这就是我的想法——唯一的方法是检查元素的计算样式。我很确定有其他东西影响了

我把

\n

放在引号里，它给了我一个列表\n我明白为什么，

\n

不是HTML，所以它不会工作。这篇文章说用

来代替。谢谢你的帮助。我试过

位置：亲戚但我只是把它添加到我的聊天记录中。现在工作
div.MyChatholders {
    position: relative;
    left: 5px;
    color: black;
    width: 290px;
    height: 100px;
    border-radius: 10px;
}
div.pro_pic {
    position:relative;
    left: 5px;
    width: 30px;
    height: 30px;
}
div.ChatInfo {
    position:relative;
    color: black;
    font-size: 14px;
    left: 40px;
    width: 245px;
}