php 搜索结果图像显示并填充 CSS div

【问题标题】：php search result images show across and fill a CSS divphp 搜索结果图像显示并填充 CSS div
【发布时间】：2013-07-24 20:08:16
【问题描述】：

我正在使用 dreamweaver 和 php 根据搜索条件返回图像列表。我使用了 Dreamweaver 的重复功能，可以让图像在彼此下方重复（如下所示）。

<table width="100" height="38" border="1"> 
<?php do { ?> 
<tr> 
<td width="38">
<img class='example' src="images/<?php echo $row_getresult['image_name']; ?>.png"/><br>       
</a></td></tr> 
<?php } while ($row_getamenityaccommodation = mysql_fetch_assoc($getamenityaccommodation)); 
?> 
</table>

如何让图像在 CSS Div 中相互交叉，例如向左飘浮;宽度：45%；这样，如果图像数量超过 45% 的容量，图像会继续换行吗？

会以某种方式“打印”数组吗？

【问题讨论】：

用所需宽度的容器替换表格并用浮动图像填充它。

标签： php html css

【解决方案1】：

删除表格并替换为

<div style='width:45%'>
<?php do{ ?>
<img style='float:left;class='example' src="images/<?php echo $row_getresult['image_name']; ?>.png"/>
<?php } while ($row_getamenityaccommodation = mysql_fetch_assoc($getamenityaccommodation)); ?>
</div>

或者对于更语义化的版本，使用 ul 因为您正在显示图像列表。

<ul class='gallery'>
<?php do{ ?>
<li><img style='float:left;class='example' src="images/<?php echo $row_getresult['image_name']; ?>.png"/></li>
<?php } while ($row_getamenityaccommodation = mysql_fetch_assoc($getamenityaccommodation)); ?>
 </ul>

在css中

  ul.gallery {
       width: 45%;
       list-style: none;
       margin:0; padding:0;
  }

  ul.gallery li {
       float:left;
       padding: 5px;
  }

【讨论】：

太棒了，谢谢！