我有以下问题：
我正在我的网站上显示数据库中的多个项目。它们看起来不错，订购了 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
}
}
?>
这是一个 CSS 问题。 可以通过向导致代码中换行的<span>元素添加clear:both来解决此问题。
目前，您正在成对列出照片。您可以使用空的 <span> 标记在每对之间强制换行，如下所示：
A B
-- span --
C D
....
但是，这个<span>标签不能很好地与所有<div>一起使用，因为<div>是浮动的。浮动的元素呈现的位置与不浮动的元素不同。在这种特定情况下，您的所有<span>标记实际上都呈现在页面顶部附近：
-- span --
-- span --
A B
C D
...
您可以通过向浮动元素添加 clear CSS 属性来强制 <span> 遵循浮动元素的位置：
span {
display: block;
clear:both; /* this element will respect the location of anything that floats right or left */
}
我还会考虑向这个特定<span>添加一个类。 <span>是一个常见元素，导致所有这些元素clear:both可能会产生意想不到的后果。