0

我有以下问题：

我在我的网站中显示来自数据库的多个项目。它们看起来不错，订购了 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
    }

}               
?>
4

1 回答 1

1

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

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

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

然而，这个<span>标签并不适合所有的<div>s，因为<div>s 是浮动的。浮动的元素与不浮动的元素呈现在不同的位置。在这种特定情况下，您的所有<span>标签实际上都呈现在页面顶部附近：

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

您可以通过向浮动元素添加CSS 属性来强制<span>s 尊重浮动元素的位置：clear

span {
display: block;
clear:both; /* this element will respect the location of anything that floats right or left */
}

我还会考虑为这个特定的<span>. <span>是一个共同的元素，并导致所有这些都clear:both可能产生意想不到的后果。

于 2013-02-01T01:05:04.380 回答