Question

我正在进行一次小聊天，我遇到的问题是让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都处于一个位置。我希望他们能够低于对方。我不明白为什么会这样。有人可以帮助我解释我的代码并解释原因吗？

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

Answer 1

将position:relative;添加到div。

根据您的代码工作小提琴：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;
}

Answer 2

使用<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，它不起作用。您可以根据this post

使用<br />

Answer 3

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

如何使我的聊天div显示在彼此之下

3 个答案: