Я заполняю изображения от своей базы данных в таблице, как ограничить изображения три на строку?
<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
$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
с оператором modulus.
Вы можете использовать CSS в качестве альтернативы, если изображения имеют фиксированную ширину и вы можете обойтись без таблиц - создайте обертку div с фиксированной шириной вокруг всего списка изображений и просто расположите каждое изображение слева.
Здесь я очистил ваш недопустимый HTML, использовал CSS и использовал более рекомендуемый стиль кодирования PHP.
Обратите внимание: вы должны знать, что если $ Selected
содержит введенные пользователем (или иным образом не безопасные для HTML) данные, вам необходимо заключить свой вывод в htmlspecialchars
или быть открытыми для уязвимостей XSS.
Было немного непонятно, что вы имели в виду, говоря «ограничить количество изображений до трех в строке», учитывая, что в настоящее время отображается только одно изображение в строке. Если я предполагаю, что вы хотите отображать 3 в строке, а не 1, вам нужно использовать оператор модуля и открывать новый Таблицы должны быть зарезервированы для ситуаций, когда столбцы и строки имеют смысл... Лучшее решение - использовать плавающие блочные элементы вместо ячеек таблицы. Когда вы размещаете несколько одинаковых блоков, они автоматически сворачиваются, поэтому главное - сделать их родительский контейнер достаточно широким, чтобы вместить 3 таких блока. Вам не нужно делать ничего особенного с php для создания новых строк, поэтому я просто покажу html и css, а вы напишите php, чтобы это произошло. html: css: Вы можете попробовать использовать http://www.php.net/manual/en/function.array-chunk.php Вот упрощенный пример без посторонней информации о стилях, чтобы показать принципала. На каждое третье изображение мы хотим записать открывающий и закрывающий теги (но не одновременно). Итак, мы просматриваем список изображений и используем оператор moduulus, чтобы узнать, когда нам следует печатать теги Эй, не могли бы вы попробовать это. Обратите внимание, что я заменил Надеюсь, это поможет тебе и всем остальным заинтересованным.:)
только после каждого третьего элемента, а затем закрывать его в правильное время. Примерно так:
<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> </td>';
}
echo '</tr>';
}
}
?>
</table>
<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"> </div>
</div>
#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
$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>
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>
Похожие вопросы: