divs在事故中重叠

Question

我的 mysql 数据库中有回显的帖子。如果有多个，它们会按照排名号递减的顺序在单独的 div 中回显（取自 DB）。但是，当 div 被回显时，所有重叠在顶部。我相信这是一个 CSS 问题。问题是每个 div 都有几个子 div。我认为“位置”属性可能促成了这一点。我希望每个 div 之间有大约 100px 的回声。谢谢。

代码：

$post = array();
$f=0;
while ($row=mysql_fetch_assoc($g)){
  $post[]=$row['post'];

  echo "<div id='area'>";
  echo "<div id='badge'><span style='color: gray;'>Answered by:</span>";
  include 'badge.php';
  echo "</div>";
  echo "<div id='areapost'><pre>$post[$f]</pre></div>";
  $f++;
}
echo "</div>"; /*end area*/

CSS 代码：

#area {
  background-color: #fff;
  border: 1px solid red;
  width:500px;
  height: 300px;
}

#badge{
  position: absolute;
  top: 0px;
  left: 0px;
}

#areapost{
  position: absolute;
  top: 0px;
  right: 0px;
  height: 300px;
  width: 380px;
  background-color: #E0E0E0;
  overflow: -moz-scrollbars-vertical;
  overflow-x: hidden;
  overflow-y: scroll;
}

“区域”是整个帖子容器。 areapost 和 badge 是“区域”内的元素

Answer 1

页面中的所有元素必须具有唯一的 id，否则会出现意外行为。 解决这个问题，看看它把你放在哪里。

Answer 2

尝试将开始的“区域”div标签移出条件：

 while ($row=mysql_fetch_assoc($g)){
    $post[]=$row['post'];
    echo "<div id='area'>";

应该是：

echo "<div id='area'>";
while($row=mysql_fetch_assoc($g)){
     $post[]=$row['post']

因为您希望区域包含其他所有内容

Answer 3

您几乎总是需要在同一循环级别打开和关闭 div。在这里，您在 while 循环内打开 <div id='area'> 并在 while 循环外关闭它。他们需要要么都进，要么都出。此外，您的 id 在整个页面上应该是唯一的，否则您应该在这些 div 上使用类。

您也不需要绝对定位所有这些区域。我在所有内容上都添加了内容div。这个绝对定位，和区域类相对。您不需要 #area 的样式，将其更改为 .area。

$f=0;

echo "<div id='content'>"
while ($row=mysql_fetch_assoc($g)){
  $post[]=$row['post'];

  echo "<div id='area-'" + $f + " class='area'>";
  echo "<div class='badge'><span style='color: gray;'>Answered by:</span>";
  include 'badge.php';
  echo "</div>";
  echo "<div class='areapost'><pre>$post[$f]</pre></div>";
  echo "</div>"; /*end area*/

  $f++;
}
echo "</div>"

Answer 4

还可以尝试使用相对定位，每个位置留出 100 像素的空间。这样每个 div 将相对于前一个 div 隔开，而不是一个点，从而导致它们重叠。