在每第6条记录之后闯入一条新线

Question

我希望在每第6张唱片之后突破到新的一行，但它只会在第五张唱片之后中断并将第六张唱片留在自己的一行（见下图）。

for($i = 1; $i < 13; $i++) {
    echo '<div style="display: '.($i % 6 == 0 ? '' : 'inline-').'block; padding: 0 10px;"></div>';
}

我在这里做错了什么？我该如何解决？

Answer 1

您可以尝试使用7

echo '<div style="display: '.(($i % 7 == 0) ? '' : 'inline-').'block; padding: 0 10px;"></div>';

Answer 2

六个云（带间距）的宽度可能大于云容器中的可用空间。检查空格或增加外部容器宽度（或减少填充）

Answer 3

使用display:inline-block设置所有项目，并在第6个元素之后添加：

<div style="clear:both"></div>

在您的网站上对其进行了测试并且有效

Answer 4

你得到那个结果是正常的，这是一个数学逻辑：

  for($i = 1; $i < 13; $i++) {
        echo '<div style="display: '.($i % 7 == 0 ? '' : 'inline-').'block; padding: 0 10px;"></div>';                                   ^
    }

Answer 5

根据我的评论，你的逻辑存在缺陷，因为块元素的宽度为100％。

相反，减小容器的宽度，并将所有元素保留为内联块：

<div id="infopage-prognosis" style="display: block; width:450px">
<?php for($i = 1; $i < 13; $i++) {
    echo '<div style="display: inline-block; padding: 0 10px;"></div>';
} ?>
</div>