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

在我正在研究的网站的主页上，我们从数据库中生成了大约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 />"; 
     } 
    } 
}

来源

2012-11-01 sluggerdog

使用正常的文档流程。 –

1.5MB首页ouch！不是每个人都有光纤互联网连接 – 2012-11-01 22:52:42

取出<br/>标签。你的问题解决了。图像将根据您的容器分区大小自动调整。

来源

2012-11-01 22:53:39 AndrewR

谢谢，我如何去围绕图标居中？如果您将页面的宽度缩小为在整个页面上显示1或2个图标，则通知它们不在该区域内居中。 – sluggerdog

我想你有两件事去那里。在低于755px之后，您不再“捕捉”特定的宽度。另外，这两个下拉菜单和按钮放在一个表格中，可以防止该部分缩小。将每个下拉菜单和按钮放在一个浮动div中，以便让它们在彼此之上堆叠起来，而不是在小的时候并排放置。 – AndrewR

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

回答

相关问题