Question

在我正在处理的网站的主页上，我们在屏幕上从数据库中生成了大约50个大图标/图像，我目前已经将它们调出5个，然后我放入一个BR标签转到下一行（使用PHP和计数器）。我的问题是设计需要响应，所以如果你缩小屏幕一点，它将在第一行保存3，然后在下一行保存2，然后PHP生成的BR标签启动，所以我们得到一个空格。

解决这个问题的最佳方法是什么，无论屏幕尺寸如何，每次都能正常工作？我正在使用Twitter Bootstrap和cakephp进行编码。

了解我的意思的最佳方式是在网站上：http://www.beanclaim.com/

由于

当前的PHP代码是：

// LOOPING THROUGH ALL OF THE INDUSTRY ICONS AND BUILDING A LINK FOR THEM
// ---------------------------------------------------------------------------------->
if (isset($industry_icons)) 
{ 
    $i=0;
    foreach ($industry_icons as $industry) 
    { 

        echo $this->Html->link($this->Html->image($industry['Industry']['image_path'],
            array(
                'width' => '180',
                'style' => 'margin-right: 5px; margin-left: 5px; margin-bottom: 10px;')),
            array('controller' => 'users', 'action' => 'register', 'industries' => $industry['Industry']['id']),
            array('escape' => false));


      $i++;
      if($i % 5 == 0)
      {
        echo "<br />"; 
      }
    } 
}

Answer 1

删除<br/>标记。而且你的问题已经解决了。图像将根据容器div大小自动调整。

响应式设计 - 数据库生成的图标/图像

1 个答案: