0

我正在进行一次小型聊天，但在使 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++;
}

我的CSS：

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

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

现在我的问题是所有的 div 都在一个位置。我希望他们彼此落后。我不明白为什么会这样。有人可以帮我写代码并解释原因吗？

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

4

3 回答 3

2

添加position:relative;到您div的 s。

根据您的代码工作小提琴：http: //jsfiddle.net/MmGyU/1/

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

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;
}
于 2013-05-03T01:44:04.237 回答
-1

使用它将标签打印<div>到循环中的新行\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++;
}

编辑语法错误，\n需要在引号内

第二次编辑我的错误，\n不是 HTML，它不会工作。您可以<br />根据这篇文章改用

于 2013-05-03T01:30:28.457 回答
-2

添加clear:both;到您的聊天 div。

于 2013-05-03T01:31:44.130 回答