Question

我一直在与Twitter合作，旨在抓住用户的粉丝并以网格格式显示它们。下图说明了我希望如何安排输出：

Envisaged final layout

我目前尝试使用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

我宁愿使用表格中的div，因为你不必在你的网格中创建任意数量的列，只需改变一个元素的宽度，它们彼此相邻，取决于父元素的宽度。

这里是示例：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>

希望它有所帮助。抱歉我的英语：）

Answer 2

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

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

您需要以略微不同的标记显示每个备用用户。具有偶数编号索引的用户将显示为行中的第一个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 5

为什么不在表格的单元格中包含一个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！

编辑：这次完全基于div并包括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>

在PHP foreach循环中使用HTML表创建“网格”

5 个答案: