php - 在 PHP/CSS 中动态创建的网格仅在 Android Firefox 浏览器中看起来不对？

Question

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

http://dallaspetsalive.org/new-adoptables/

目标是，在普通浏览器中，带有图像和信息的 div float 到左侧或右侧，形成两列列表，但随着屏幕变小，它会下降到一列。

这适用于我尝试过的所有浏览器，但我的 Android 上的 Firefox 除外。我很困惑为什么那里会有所不同。这就像 div 是重叠的。这是屏幕截图:http://i.imgur.com/rCKE6cB.png

这是 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>";
                }

这是正常尺寸的相关 CSS:

#pet-search-left { width: 270px; float: left; height: 200px; padding: 3px;}
#pet-search-right { width: 270px; float: right; height: 200px; padding: 3px;}

较小的尺寸:

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

这是怎么回事？

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

Answer 1

我设法通过在 div 之后添加一个新行(字面意思是一个输入)来解决这个问题。

从字面上看

echo "</div>
";

代替

echo "</div>";

不知道为什么会改变它。