Как ограничить количество изображений в строке тремя?

Здесь я очистил ваш неверный 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>

Таблицы следует резервировать для ситуаций, когда столбцы и строки имеют значение... Лучшим решением является использование плавающих блочных элементов вместо ячеек таблицы. Когда вы перемещаете кучу похожих блоков, они автоматически сворачиваются, поэтому ключ делает их родительский контейнер достаточно широким, чтобы вместить 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;
}

Вы можете использовать CSS в качестве предупреждения, если изображения имеют фиксированную ширину, и вы можете обойтись без таблиц - создайте div-оболочку с фиксированной шириной вокруг всего списка изображений и просто переместите каждое изображение влево.

Вот упрощенный пример без посторонней информации о стиле, чтобы показать принципала. На каждом 3-м изображении мы хотим написать открывающий и закрывающий теги (хотя и не одновременно).

Итак, мы перебираем список изображений и используем оператор модуля, чтобы узнать, когда нам следует распечатать теги <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>

Вы можете попробовать использовать http://www.php.net/manual/en/function .array-chunk.php

Эй, не могли бы вы попробовать это.

Обратите внимание, что я заменил 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>