使用CSS气泡DIV展示MySQL数据时，如何避免气泡重叠？

问题描述 #

我是PHP新手，尝试将MySQL表内容展示在CSS实现的对话气泡DIV中，但气泡互相堆叠，看起来仅显示一行数据。在气泡DIV外输出换行只能添加一行间距，需多个才能分隔；在DIV内加换行还出现语法错误，求助如何让每行数据对应独立气泡并正常分隔显示。

问题原因 #

核心问题是CSS中给.speech-bubble设置了position: absolute——绝对定位会让元素脱离正常文档流，所有气泡都会定位在页面的同一位置，最终导致堆叠重叠。

修复方案 #

1. 修改CSS样式 #

将绝对定位改为相对定位，同时添加间距和内边距，调整气泡箭头位置：

.speech-bubble {
   width: 70%; 
   height: auto; 
   background: #6d8c33;
   position: relative; /* 替换absolute，让元素回到文档流 */
   left: 100px;
   margin-bottom: 20px; /* 气泡之间的间距 */
   padding: 15px; /* 内容与边框的距离，避免贴边 */
   -moz-border-radius: 10px; 
   -webkit-border-radius: 10px; 
   border-radius: 10px;
}
.speech-bubble:before {
   content: "";
   position: absolute;
   width: 0;
   height: 0;
   border-top: 13px solid transparent;
   border-right: 26px solid #6d8c33;
   border-bottom: 13px solid transparent;
   left: -26px; /* 相对父元素定位箭头 */
   top: 13px;
}

2. 优化PHP代码 #

简化变量使用，避免冗余，同时确保输出结构正确：

<?php
$servername = "localhost";
$username = "";
$password = "";
$dbname = "";

// 创建数据库连接
$conn = new mysqli($servername, $username, $password, $dbname);
if ($conn->connect_error) {
  die("连接失败: " . $conn->connect_error);
}

$sql = "SELECT first_name, review, initial, approved FROM test";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
    while ($row = $result->fetch_assoc()) {
        if ($row['approved'] == "1") {
            echo '<div class="speech-bubble">';
            echo $row['first_name'] . ' ' . $row['initial'] . '<br><br>' . $row['review'];
            echo '</div>';
        }
    }
    $result->free();
}
$conn->close(); // 关闭数据库连接
?>

修改说明 #

• CSS：position: relative让气泡按正常文档流从上到下排列，margin-bottom控制气泡间距，padding优化内容显示，调整箭头的left和top属性确保位置正确。
• PHP：直接使用$row数组元素减少冗余变量，拆分echo语句避免字符串拼接时的语法错误，添加$conn->close()优化资源占用。

内容的提问来源于stack exchange，提问作者Michael Long