php - 如何使图像回显与表格行中的下一个图像对齐

Question

我在使我的图像从我的 mySQL 数据库中正确排列时遇到了问题。我遇到的问题是，我基本上想从 CMS 在此页面上加载 24 张图像。我将图像加载到一个表格中，该表格设计为每行 4 个图像。问题:第一行有 2 张图片，第二行有 1 张图片，第三行有 3 张图片，第四行有 1 张图片，第五行有 3 张图片，第六和第七行每行有 1 张图片。我无法每行获得 4 张图像。有人可以帮忙吗？

<!-- IMAGE GALLERY -->

    <h2 class="text1">Image Gallery</h2>
    <p>Click any image to open up a larger version</p>
    <div class="gallery">
        <?php
            $dbc = mysqli_connect(DB_HOST, DB_USER, DB_PASSWORD, DB_NAME); 
            $query = "SELECT * FROM cmhimage ORDER BY id DESC";
            $data = mysqli_query($dbc, $query);
            ?><table><?php 
            $level = 1;
            while ($row = mysqli_fetch_array($data)) { 
                $description = $row['capt'];
                $photo = $row['file'];
                $count = 1;
                $level = $level + $count;

                if (($level == 4) || ($level == 8) || ($level == 12) || ($level == 16) || ($level == 20) || ($level == 24)){
                    echo '<tr>';
                }

                 // Display the data
                echo '<td><table><tr><td><a href="manage/image/' . $photo . '" target="_blank"><img class="imgcontain" src="manage/image/' . $photo .'" border="0"/></a></td></tr></td><br/>';  
                echo '<td><tr><td><p class="caption">' . $description .'</p></tr></td></table></td>';  
                if (($level == 4) || ($level == 8) || ($level == 12) || ($level == 16) || ($level == 20) || ($level == 24)){
                    echo '</tr>';   
                    }

            }
            mysqli_close($dbc);

        ?>
       </table>

如果这是问题所在，这里是 CSS。

.gallery {
width: 525px;
}
.imgcontain {
padding-right:15px; 
float: left;
width: 110px;
height: 110px
}
.caption {
font:bold 78% arial,helvetica,sans-serif; 
text-align:center; 
position: relative;
right: 10px;
color:#056063;
} 

Answer 1

有很多问题。 首先，代码几乎不可读

使用这种结构，第一个 tr 不显示 而不是

 if (($level == 4) || ($level == 8) || ($level == 12) || ($level == 16) || ($level == 20) || ($level == 24))

尝试

if($level == 1 || $level % 4 == 0)

取代了

echo '<td><table><tr><td><a href="manage/image/' . $photo . '" target="_blank"><img class="imgcontain" src="manage/image/' . $photo .'" border="0"/></a></td></tr></td><br/>';
echo '<td><tr><td><p class="caption">' . $description .'</p></tr></td></table></td>'; 

试试这个

echo '<td>';
echo ' <table>';
echo '  <tr>';
echo '    <td>';
echo '       <a href="manage/image/' . $photo . '" target="_blank"><img class="imgcontain" src="manage/image/' . $photo .'" border="0"/></a>';
echo '   </td>';
echo '   <td>';
echo '     <p class="caption">' . $description .'</p>';
echo '   </td>';
echo '  </tr>';
echo ' </table>';
echo '</td>';

和

if (($level == 4) || ($level == 8) || ($level == 12) || ($level == 16) || ($level == 20) || ($level == 24)){
                    echo '</tr>';   
                    }

和第一个一样。

尝试格式化你的代码。有了这个空间，您会看到许多单元格和行没有闭合。

编辑: 放 $计数 = 1 在一段时间开始之前! 在 while 的最后一行:

$count++;