Question

我的帖子是从我的mysql数据库中回显的。如果有多个，则按顺序递减（从DB中取得）的顺序在单独的div中回显它们。但是，当div被回显时，顶部全部重叠。我相信这是一个CSS问题。问题是每个div都有几个子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和徽章是“区域”内的元素

Answer 1

页面中的所有元素必须具有唯一ID，否则会出现意外行为。解决这个问题，看看它给你带来了什么。

Answer 2

尝试将开头“area”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

也尝试使用相对定位，每个都有100px的空间。这样每个div将相对于前一个div而不是一个点间隔，导致它们重叠。

Answer 4

您几乎总是需要在相同的循环级别打开和关闭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>"

分裂在事故中重叠

4 个答案: