-2

通过使用下面的代码，我显示了 9 张图像，但所有图像并排对齐，如何在一行中显示每 3 张图像，在另一行中显示另外 3 张图像？

<table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody>
<?php $sel = $db->query("select * from gallery order by gallery_cat_id asc    limit 1,1"); 
while($row=mysql_fetch_array($sel)){ ?>
<tr><td align="left" valign="top"><table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><?php $sel1 = $db->query("SELECT DISTINCT ( i.gallery_album_id ) 
FROM mov_gallery_album AS a, mov_gallery_images AS i
WHERE a.gallery_album_id = i.gallery_album_id
AND a.gallery_cat_id =".$row['gallery_cat_id']."
ORDER BY a.gallery_album_id DESC
LIMIT 0 , 9 "); if(mysql_num_rows($sel1)>0){ ?>
</tr><tr>

<?php 
while($row1=mysql_fetch_array($sel1)){
$dis1 = $db->getRow("select * from ".ALBUMS." where gallery_album_id=".$row1['gallery_album_id']." limit 0,1"); 
$dis2 = $db->getRow("select * from ".GALLERY." where gallery_id=".$dis1['gallery_id']." limit 0,1"); 
$dis3 = $db->getRow("select * from ".ALBUMSIMAGES." where gallery_album_id=".$row1['gallery_album_id']." limit 0,1"); 
$dis4 = $db->getRow("select * from ".GALLERYCATEGORY." where gallery_cat_id=".$dis2['gallery_cat_id']." limit 0,1"); 
?>

<td align="left" width="100%"><table border="0" cellpadding="5" cellspacing="0">
<tbody><tr><td align="center" height="8" valign="middle" width="80">
<div style="border:0px;clear:both;padding-bottom:100px;margin-left:-110px;">
<div class="image_stack1"><a href="<?php echo SITE; ?>album/<?php echo  ucfirst($dis1['gallery_cat_id']); ?>/<?php echo ucfirst($dis1['gallery_id']); ?>/<?php echo ucfirst($row1['gallery_album_id']); ?>/">
<img id="photo3" src="<?php echo SITE; ?>uploads/gallery/<?php echo $dis4['folder']; ? >/<?php echo $dis2['folder']; ?>/<?php echo $dis1['folder']; ?>/thumb/<?php echo   $dis3['image']; ?>"width="80" height="80">
<div class="namehover1"><?php echo substr(ucfirst($dis1['name']),0,13); ?></div>
</a></div></div></td></tr></tbody></table></td><?php } ?></tr><tr><td class="midtitle" align="center" valign="middle">&nbsp;</td></tr>
<tr><td style="padding-right: 10px;" align="right" colspan="4"><a href="<?php echo SITE; ?>gallery/<?php echo ucfirst($row['gallery_cat_id']); ?>/" class="midtitle">
<img src="http://www.img./viewall.png" border="0"/>
</a></td></tr><?php } ?></tbody></table></td></tr><?php  } ?></tbody></table>
4

4 回答 4

2

使用 div 而不是 table 是明智的。一些css行可以解决问题。您不必在逻辑上确定在 3 张图像后移至下一行。这是在 css 中如何使用它让所有图像都有一个 div 容器。

<style>
#photo_wrapper {
    width:600px;
}
.photo {
width:150px;
height:150px;
display:block;
float:left;
border:6px #c5d0d6 solid;
margin-right:5px;
margin-bottom:5px;
overflow:hidden;
}
</style>
<div id="photo_wrapper">
    <img src="image.jpg" class="photo"/>
    <img src="image.jpg" class="photo"/>
    <img src="image.jpg" class="photo"/>
    <img src="image.jpg" class="photo"/>
    <img src="image.jpg" class="photo"/>
    <img src="image.jpg" class="photo"/>
</div>
于 2012-08-11T11:59:03.030 回答
1

这通常使用模（除法后的余数）运算符完成：

foreach ($results as $nr => $row) {
  if (($nr % 3) == 0) echo '<tr>';
  ...
  if (($nr % 3) == 0) echo '</tr>';
}
于 2012-08-11T11:29:17.740 回答
0

这个概念很简单，每次使用一个计数器this counter MOD 3 is zero，开始一个新行。或者只数到 3 并重置计数器。

$i = 1;
while( $data = ....)
{
  if($i == 1)
  {
   echo "<tr>"; //new line
  }

 echo "<td> .... </td>";

  if($i == 3)
  {
    $i = 1;
    echo "</tr>";
  }
  else
  {
   $i++;
  }
}

//IMPORTANT! PLEASE NOTICE TO THIS PART: (OUT OF THE LOOP)
if($i < 3)
 echo "</tr>";
于 2012-08-11T11:26:40.437 回答
0

您可以将 9 张照片放在一个 div 中，然后固定该 div 的宽度，使其足以容纳一行中的 3 张照片。并设置浮动：左；CSS中的img标签。

于 2012-08-11T11:39:06.033 回答