Come limitare il numero di immagini in una riga a tre?

Question

Sto compilando le immagini dal mio database in una tabella, come limitare le immagini a tre per riga?

<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> 

Questo è il mio tavolo

Answer 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. 
?> 

È necessario utilizzare un if con un operatore modulo.

Answer 2

È possibile utilizzare CSS come un alernative se le immagini hanno una larghezza fissa e si può fare a meno delle tabelle - creare un div wrapper con una larghezza fissa attorno all'intero elenco di immagini e semplicemente spostare ogni immagine a sinistra.

Answer 3

Ehi, ci provate.

Si noti che ho sostituito lo if...else con un operatore ternario. Lo preferisco compatto.

spero che tu e chiunque altro interessato aiuta. :)

<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> 

Answer 4

Qui, ho pulito il codice HTML valido, CSS utilizzato, e ho usato uno stile di codifica PHP più consigliato.

Si prega di notare: è necessario essere consapevoli del fatto che se $Selected contiene dati utente-immessi (o in altro modo non-HTML-safe), è necessario per avvolgere la vostra uscita nelle htmlspecialchars o essere aperto a vulnerabilità XSS.

È stato un po 'poco chiaro cosa intendevi per "limitare le immagini a tre per riga" considerando che al momento mostrava solo 1 per riga. Se devo presupporre che desideri mostrare 3 per riga anziché 1, devi utilizzare l'operatore modulo e solo dopo aver aperto un nuovo elemento <tr> dopo ogni terzo elemento e chiuderlo al momento giusto. Come questo:

<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> 

Answer 5

Le tabelle devono essere riservati a situazioni in cui le colonne e le righe hanno un significato ... Una soluzione migliore è quella di utilizzare elementi di blocco flottanti invece di celle della tabella. Quando fai galleggiare un gruppo di blocchi simili, si avvolgono automaticamente, quindi la chiave sta rendendo il contenitore genitore abbastanza largo da contenere 3 di essi.

Non è necessario fare nulla di speciale con php per creare nuove righe, quindi visualizzerò solo html e css, permettendoti di scrivere il php per farlo accadere.

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; 
} 

Answer 6

Ecco un esempio semplificato senza le informazioni styling estranea a mostrare il principale. Ogni terza immagine vogliamo scrivere i tag di apertura e di chiusura (anche se non allo stesso tempo).

Quindi passiamo in rassegna l'elenco delle immagini e usiamo l'operatore moduulus per sapere quando dovremmo stampare i tag <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> 

Answer 7

Puoi provare a utilizzare http://www.php.net/manual/en/function.array-chunk.php