在PHP/CSS中动态创建的网格看起来只有在Android Firefox浏览器中才是错误的？

我正在为我的救援网站准备一份新的可收养狗名单。我创建了一个列表页面，从第三方API提取图片和信息，然后列出它们：

目标是，在普通浏览器中，包含图像和信息的div会向左或向右浮动，形成一个两列列表，但随着屏幕变小，它会下降到一列

除了Android上的Firefox之外，我尝试过的所有浏览器都可以使用它。我不明白为什么那里会不一样。好像两个div重叠了。以下是一个屏幕截图：

下面是PHP代码

                foreach($dogsList as $dog) {
                    $num = $num + 1;
                    if($left) {
                        echo "<div id=\"pet-search-left\">";
                        $left = 0;
                    } else {
                        echo "<div id=\"pet-search-right\">";
                        $left = 1;
                    }

                    echo "<a href=\"dog-profile?id=";
                    echo $dog['animalID'];
                    echo "\" style=\"text-decoration: underline; color: #006bb7;\">";
                    echo "<img src=\"";
                    echo $dog['animalThumbnailUrl'];
                    echo "\" style=\"float: left; margin-right: 10px;\" /><h3>";
                    echo $dog['animalName'];
                    echo "</h3></a>";
                    echo $dog['animalGeneralAge'];
                    echo " ";
                    echo $dog['animalSex'];
                    echo "<br />";
                    echo $dog['animalGeneralSizePotential'];
                    echo "<br />";
                    echo $dog['animalBreed'];
                    echo "</div>";
                }

较小尺寸：

#pet-search-left { width: 100%; height: 200px;}
#pet-search-right { width: 100%; height: 200px;}

发生了什么事

---

编辑：在Android Chrome上也是错误的。

我通过在div后面添加一个新行（字面上是enter）来解决这个问题

真的吗

echo "</div>
";

echo”
";

而不是

echo "</div>";

echo”“；

不知道为什么会改变

echo "</div>";