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

Ответ 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 с оператором модуля.

Ответ 2

Здесь я очистил ваш недействительный HTML, использовал CSS и использовал более рекомендуемый стиль кодирования PHP.

Обратите внимание: вам нужно знать, что если $Selected содержит введенные пользователем (или иным образом небезопасные) данные, вам необходимо обернуть свой вывод в 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

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

Ответ 4

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

Ответ 5

Эй, ты бы попробовал это.

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

Ответ 6

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

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

Ответ 7

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