如何将一行中的图像数量限制为三个？答案

【问题标题】：How to restrict number of images in a row to three?如何将一行中的图像数量限制为三个？
【发布时间】：2011-03-05 16:56:35
【问题描述】：

我正在将数据库中的图像填充到表格中，如何将图像限制为每行三个？

<table border="0" align="center" height="25%" width="25%"  >
<tr><td align="center" width="50px"  bgcolor="#4b2d0e"><strong><font color="#FFFFFF">Friend List</font></strong></td></tr>
 <? foreach($Selected as $row)
 {   
     $value = $row['dPath'];
     $imgp =  base_url()."images"."/".$value;
 ?>
 <tr><td bgcolor="#999999">
 <strong ><?=$row['dFrindName'].'</br>';?></strong>
 <? if($value!="") { ?>
 <a class="Tab_Link" href="<? echo site_url();?>/friends/View_FProfile/<?=$row['dMember_Id']?>"><img src="<?=$imgp ?>" name="b1" width="90" height="80" border="0"/></a><br>
 <? } else { ?>
 <a class="Tab_Link" href="<? echo site_url();?>/friends/View_FProfile/<?=$row['dMember_Id']?>"><img src="../images/us.png" width="90px" height="80px"></a>
 <? }?>
 </td></tr>
 <? }}?>
</table>

这是我的桌子

【问题讨论】：

离题：您应该使用类和样式表，而不是这些已弃用的内联属性

标签： php html css html-table

【解决方案1】：

<?php 

$x=0;

    foreach($Selected as $row){

        if($x%3 == 0)
            echo '<tr>';

        $value = $row['dPath'];
        $imgp =  base_url()."images"."/".$value;
?>

        <td style="background-color:#999999;">
            <strong ><?=$row['dFrindName'].'</br>';?></strong>

            <?php if($value!="") {?>
                <a class="Tab_Link" href="<? echo site_url();?>/friends/View_FProfile/<?=$row['dMember_Id']?>"><img src="<?=$imgp ?>" name="b1" width="90" height="80" border="0"/></a><br>
            <?php } else { ?>
                <a class="Tab_Link" href="<? echo site_url();?>/friends/View_FProfile/<?=$row['dMember_Id']?>"><img src="../images/us.png" width="90px" height="80px"></a>
            <?php }?>
        </td>
<?php
        if($x%3 == 0)
            echo '</tr>';
        x++; 
    }

    if(($x-1)%3 != 0)
        echo '</tr>'; //Prints out the last '<tr>' if one isn't printed.
?>

您需要将if 与模运算符一起使用。

【讨论】：

值得一提的是，模运算符返回除法的余数。所以 Aaron 在这里除以 3 并检查余数是否为零。如果它为零，那么我们可以安全地结束当前行并开始另一行。
这个答案的 HTML 无效，而简单的 $x % 3 在关闭 </tr> 时实际上并不能正常工作

【解决方案2】：

嘿，你会试试这个。

请注意，我将 if...else 替换为三元运算符。我更喜欢它紧凑的。

希望它对您和其他感兴趣的人有所帮助。:)

<table border="0" align="center" height="25%" width="25%"  >
<tr>
    <td colspan="3" align="center" width="50px"  bgcolor="#4b2d0e">
        <strong><font color="#FFFFFF">Friend List</font></strong>
    </td>
</tr>
<? 
 $imgs=0;
 foreach($Selected as $row){

 $value = $row['dPath'];
 $imgp =  base_url()."images"."/".$value;

if($imgs%3 == 0){
echo '<tr>';
}
?>

    <td bgcolor="#999999">
        <strong ><?=$row['dFrindName'].'</br>';?></strong><a class="Tab_Link" href="<? echo site_url();?>/friends/View_FProfile/<?=$row['dMember_Id']?>"><img src="<?=$value!=""? $imgp: '../images/us.png' ?>" name="b1" width="90" height="80" border="0"/></a>
    </td>
<? 
$imgs++;
if($imgs%3 == 0){
echo "</tr>\n";
}

}//end loop
echo '</tr>';//end last row
?>

</table>

【讨论】：

【解决方案3】：

您可以尝试使用http://www.php.net/manual/en/function.array-chunk.php

【讨论】：

【解决方案4】：

这是一个简化的示例，没有多余的样式信息来显示主体。每第三张图片我们都想写开始和结束标签（虽然不是同时）。

所以我们循环遍历图像列表并使用模运算符来知道何时应该打印<tr> 标签。

<?php
    $column_count = 3;
    $image_list = get_images();

?>
<table>

<?php
    for($i=0; $i < sizeof($image_list); i++) {
        $cur_img = $image_list[$i];
        $img_url = $cur_img['url'];

        // open a we row every 3rd column
        if($i % $column_count == 0) {
            print '<tr>';
        }

        // for every image we want a table cell, and an image tag
        print "<td> <img src='$img_url'> </td>";

        // close the row every 3rd column, but offset by 3 from the opening tag
        if($i % $column_count == $column_count - 1) {
            print '<tr>';
        }
    }

    // what if the number of images are not div by 3? Then there will be less
    // than 3 items in the last row, and no closing tag. So we look for that and
    // print a closing tag here if needed
    if(sizeof($image_list) % $column_count != 0) {
        print '</tr>';
    }
?>
</table>

【讨论】：

【解决方案5】：

应该为列和行有意义的情况保留表格...更好的解决方案是使用浮动块元素而不是表格单元格。当你漂浮一堆相似的方块时，它们会自动换行，所以关键是让它们的父容器足够宽以容纳其中的 3 个。

你不需要对 php 做任何特殊的事情来创建新行，所以我只显示 html 和 css，让你编写 php 来实现它。

html:

<div id="replacesTable">
    <div class="replacesTableCell">
        <div class="name">Name</div>
        <img src="http://stackoverflow.com/favicon.ico" />
    </div>
    <div class="replacesTableCell">
        <div class="name">Name</div>
        <img src="http://stackoverflow.com/favicon.ico" />
    </div>
    <div class="replacesTableCell">
        <div class="name">Name</div>
        <img src="http://stackoverflow.com/favicon.ico" />
    </div>
    <div class="replacesTableCell">
        <div class="name">Name</div>
        <img src="http://stackoverflow.com/favicon.ico" />
    </div>
    <div class="clear">&nbsp;</div>
</div>

css:

#replacesTable{
    width: 300px;
}
div.replacesTableCell{
    float:left;
    width: 100px;

    /* styles below are just to make it easier to see what's happening */
    text-align:center;
    font-size: 10px;
    margin: 20px 0;
}
/* this just stretches the parent container #replacesTable around the entries*/
.clear{
    clear:both;
    height:1px;
    overflow:hidden;
}

【讨论】：

我认为问题在于他没有想到在PHP中使用模数（％）运算符；其他人澄清了这一点。无论如何 +1 “表应该保留在列和行有意义的情况下。”

【解决方案6】：

在这里，我清理了你的无效 HTML，使用了 CSS，并使用了更推荐的 PHP 编码样式。

请注意：您需要注意，如果 $Selected 包含用户输入的（或其他非 HTML 安全的）数据，您需要将输出包装在 htmlspecialchars 中或对 XSS 漏洞开放。

考虑到目前每行仅显示 1 个，您希望“将图像限制为每行三个”有点不清楚。如果我假设您希望每行显示 3 个而不是 1 个，那么您需要使用模数运算符并且只在每三个元素之后打开一个新的<tr>，然后在正确的时间关闭它。像这样：

<style type="text/css">
    a img { border: none; }
    .friend-list { border: none; width: 25%; height: 25%; margin: 0 auto; }
    .friend-list th { text-align: center; background-color: #4b2d0e; color: #fff; font-weight: bold; }
    .friend-list td { background-color: #999999; }
</style>

<?php 
$numCols = 3;
$colCount = -1;
?>
<table class="friend-list">
    <tr>
        <th colspan="<?php echo $numCols; ?>">Friend List</th>
    </tr>
    <?php
    foreach($Selected as $row) {

        $value = $row['dPath'];
        $imgp = ($value) ? base_url().'images/'.$value : '../images/us.png';

        if(++$colCount % $numCols == 0) {
            echo '<tr>';
        }
        ?>
            <td>
                <strong><?php echo $row['dFriendName']; ?></strong><br />
                <a class="Tab_Link" href="<?php echo site_url(); ?>/friends/View_FProfile/<?php echo $row['dMember_Id']; ?>">
                    <img src="<?php echo $imgp; ?>" width="90" height="80" />
                </a>
            </td>
        <?php 
        if(($colCount + 1) % $numCols == 0) {
            echo '</tr>';
        } elseif (($colCount + 1) == count($Selected)) {
            // if 16 elements are to fit in 3 columns, print 2 empty <td>s before closing <tr>
            $extraTDs = $numCols - (($colCount + 1) % $numCols);
            for ($i = 0; $i < $extraTDs; $i++) {
                echo '<td>&nbsp;</td>';
            }
            echo '</tr>';
        }
    }
    ?>
</table>

【讨论】：

【解决方案7】：

如果图像具有固定宽度，您可以使用 CSS 作为替代方案，并且您可以不使用表格 - 在整个图像列表周围创建一个具有固定宽度的包装 div，然后简单地将每个图像向左浮动。

【讨论】：