-2

以下のコードを使用して9つの画像を表示しましたが、すべての画像が横に並んでいます.3つの画像を1つの行に表示し、別の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

table ではなく div を使用することをお勧めします。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

1 つの div に 9 枚の写真を配置してから、その div の幅を修正して、1 行に 3 枚の写真だけが収まるようにします。float:left; を設定します。CSS の img タグ用。

于 2012-08-11T11:39:06.033 に答える
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 に答える