0

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

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

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

这适用于我尝试过的所有浏览器，除了我的 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 上也是错误的。

4

1 回答 1

0

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

所以从字面上看

echo "</div>
";

代替

echo "</div>";

不知道为什么会改变它。

于 2013-11-05T23:20:32.300 回答