Question

我有以下问题：

我在我的网站上显示数据库中的多个项目。它们看起来很好，订购2x2。

A  B
C  D
E  F

但是，在第4行中，只显示了1个项目，然后下一个项目位于下一行。

您可以在http://www.tahara.es/store

查看测试

我的代码如下所示：

while($info = $items->fetch(PDO::FETCH_ASSOC)) 
{

?> 
<div name='item' id='<?php echo $info['color_base1']; ?>' class='itemBox'>
    <div class='showItem'><a href='items_descr.php?itemId=<?php echo $info['id_item']; ?>'>
        <img class='itemImage' alt='' src='<?php echo "../images/".$info['imageMid']; ?>.jpg'>
        </img>
    </div>
    <br />
    <div class='indexItemText'>
        <span class='similarItemsText'>
            <a href='items_descr.php?itemId=<?php echo $info['id_item']; ?>'><?php echo $info['name']; ?></a>
             - $<?php echo $info['price']; ?> </span>
    </div>
</div>

<?php $row_count++;

if ($row_count % 2 == 0) 
    {
echo "<br />"; // close the row if we're on an even record
    }

}               
?>

Answer 1

这是一个CSS问题。您可以通过将clear:both添加到导致代码中换行符的<span>元素来解决此问题。

目前，您要成对列出照片。您使用空<span>标记在每对之间强制换行符，如下所示：

A    B
-- span --
C    D
....

但是，此<span>标记与所有<div>标记不匹配，因为<div>是浮动的。浮动的元素在不浮动的元素的不同位置渲染。在这种特定情况下，您的所有<span>代码实际呈现在页面顶部附近：

-- span --
-- span --
A    B
C    D
...

您可以通过向<span>添加clear CSS属性来强制span { display: block; clear:both; /* this element will respect the location of anything that floats right or left */ }尊重浮动元素的位置：

<span>

我还会考虑在此特定<span>中添加一个类。 clear:both是一个常见元素，导致{{1}}的所有内容可能会产生意想不到的后果。

使用PHP代码错误显示项目

1 个答案: