在PHP foreach循環中使用HTML表創建「網格」

Question

我一直在與Twitter合作，旨在抓取用戶的追隨者並以網格格式顯示它們。下面的圖片說明了我是怎麼想安排輸出：

，我現在有嘗試使用HTML表的代碼，但它只是打印出了名，那麼圖片的下面等上。我有一種感覺，我可能不得不使用嵌套表或其他東西，但我無法弄清楚。這裏是我的代碼：

<table> 
<?php foreach ($users as $user) { 
    $userScreenName = $user -> screen_name; 
    $userName = $user -> name; 
    $userImage = $user -> profile_image_url; 
    $userDescription = $user -> description; 
    ?> 

    <tr> 
     <td> 
     <?php echo $userName; ?> 
     </td> 
    </tr> 

    <tr> 
     <td> 
     <?php echo "<img src = ".$userImage.">"; ?> 
     </td> 
    </tr> 
    <?php 
} 
?> 
</table> 

我怎樣才能讓我的輸出看起來像我的圖片（名稱上面的圖片小塊在網格中並排排列）？

Answer 1

<table> 
<?php foreach ($users as $user) { 
    $userScreenName = $user -> screen_name; 
    $userName = $user -> name; 
    $userImage = $user -> profile_image_url; 
    $userDescription = $user -> description; 
    ?> 

    <tr> 
     <td> 
     <?php echo $userName; ?> 
     </td> 
     <td> 
     <?php echo "<img src = ".$userImage.">"; ?> 
     </td> 
    </tr> 
    <?php 
} 
?> 
</table> 

請記住，如果你有一個奇數的朋友加入，則最後一個表塞爾將需要添加空白

所以給你一個僞代碼示例，你最終會喜歡的東西

<table> 
    <tr> 
    <td> 
     <!-- your data here --> 
    </td> 
    If NumberOfFriends Mod 2 > 0 Then 
    <td> 
     <!-- your data here --> 
    </td> 
    Else 
    <td> 
     <!-- Blank table cell here --> 
    </td> 
    End of If statement 
    </tr> 
</table> 

Answer 2

<div id="container"> 
    <?php foreach ($users as $user) { 
      $userScreenName = $user -> screen_name; 
      $userName = $user -> name; 
      $userImage = $user -> profile_image_url; 
      $userDescription = $user -> description; 
    ?> 
      <div class="user"> 
       <div class="user_name"> 
        <?php echo $userName; ?> 
       </div> 
       <div class="user_image"> 
        <?php echo "<img src = ".$userImage.">"; ?> 
       </div> 
      </div> 
    <?php 
      } 
    ?> 
</div> 

而且你的CSS是這樣的：

#container 
{ 
    width: 400px; 
} 

.user 
{ 
    float: left; 
    width:50%; 
} 

.user_name, .user_image 
{ 
    width: 100%; 
} 

Answer 3

您需要顯示每個具有稍微不同標記的備用用戶。具有偶數索引的用戶將顯示爲連續的第一個td元素，而具有奇數索引的用戶將顯示爲該行中的第二個td。

<table> 
<?php foreach ($users as $i => $user) { 
    $userScreenName = $user -> screen_name; 
    $userName = $user -> name; 
    $userImage = $user -> profile_image_url; 
    $userDescription = $user -> description; 
    if ($i % 2 == 0) : 
?> 

    <tr> 
     <td> 
     <?php 
       echo $userName; 
       echo "<img src = ".$userImage.">"; 
     ?> 
     </td> 

<?php else : ?> 

     <td> 
     <?php 
       echo $userName; 
       echo "<img src = ".$userImage.">"; 
     ?> 
     </td> 
    </tr> 

<?php 
    endif; 
} 
?> 

Answer 4

爲什麼不包括表的單元格內一個div，與名稱的跨度和一開始的CSS或BR新行？你可以用CSS居中單元格的內容

嘗試輸出是這樣的：

<table> 
     <tr> 
      <td> 
       <div> 
        <span class="user-name">NAME</span> 
        <img class="user-face" src=""/> 
       </div> 
      </td> 
      <td> 
       <div> 
        <span class="user-name">NAME</span> 
        <img class="user-face" src=""/> 
       </div> 
      </td> 
     </tr> 
    </table> 

和樣式：

 .user-name { 
      width: 10em; 
      display: table-cell; 
      text-align: center; 
     } 
     .user-face { 
      width: 10em; 
      height: 10em; 
     } 

假設，當然，他們有一個甚至多個朋友的.. 。:)如果沒有的話，你必須添加一個空的td到最後！

編輯：這個時間完全基於divs幷包括PHP。將處理奇數的朋友:)

<div id="user-data"> 
    <?php 
     $cellPosition = "left"; 
     foreach ($users as $user) { 

     $userScreenName = $user->screen_name; 
     $userName  = $user->name; 
     $userImage  = $user->profile_image_url; 
     $userDescription = $user->description; 

     if ($cellPosition == "left") { 
      echo "<div class=\"user-table-row\">\n"; 
     } 

     echo "<div class=\"cell $cellPosition\">\n"; 
     echo " <span class=\"user-name\">$userName</span>\n"; 
     echo " <img class=\"user-face\" src=\"$userImage\"/>\n"; 
     echo "</div>"; 

     if ($cellPosition == "right") { 
      echo "</div>"; 
      $cellPosition = "left"; 
     } 
     else { 
      $cellPosition = "right"; 
     } 
     } 
    ?> 
</div> 

的樣式：

<style> 
    #user-data { 
     margin:2em; 
    } 
    div.user-table-row { 
     margin: 2em; 
     width: 24em; 
     clear: right; 
    } 

    div.cell { 
     width:10em; 
     display: table-cell; 
     text-align: center; 
     margin-bottom: 2em; 
    } 
    div.left { 
     float: left; 
    } 
    div.right { 
     float: right; 
    } 

    span.user-name { 
     width: 10em; 
    } 
    img.user-face { 
     width: 10em; 
     height: 10em; 
    } 
    </style> 

Answer 5

我寧願使用的div insted的表，因爲ü不必須創造儘可能多的列在您的網格想，只是改變一個元素的寬度，並且它們相互顯示，取決於父元素的寬度。

這裏是例子：grids example

因此您的代碼西港島線是這樣

<?php foreach ($users as $user) { 
    $userScreenName = $user -> screen_name; 
    $userName = $user -> name; 
    $userImage = $user -> profile_image_url; 
    $userDescription = $user -> description; 
?> 
<div class="name"> 
    <?php echo $userName; ?> 
    <div class="picture"> 
    <img src="./PATH/<?php echo $userImage; ?>" /> 
    </div> 
</div> 
<?}?> 

<style> 
.name { 
    position:relative; 
    float:left; 
    width: 49%; 
    height: 100px; 
    border: 1px solid; 
    text-align:center; 
    vertical-align:middle; 
} 
.picture { 
    width: 80%; 
    height: 60%; 
    display: table; 
    margin: 0 auto; 
    border: 1px solid; 
} 
</style> 

希望它幫助。很遺憾，我的英語:)