1

我一直在与 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>

如何使我的输出看起来像我的图片（图片上方的小块名称并排排列在网格中）？

4

5 回答 5

1

我宁愿使用表格的 div，因为您不必在网格中创建尽可能多的列，只需更改一个元素的宽度并且它们彼此相邻显示，这取决于父元素的宽度。

这是示例：网格示例

所以你的代码看起来像这样

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

希望能帮助到你。对不起我的英语:)

于 2013-03-17T22:01:09.030 回答
0 
<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>
于 2013-03-17T21:35:41.863 回答
0 
<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%;
}
于 2013-03-17T21:35:59.773 回答
0

您需要使用稍微不同的标记显示每个备用用户。具有偶数索引的用户将显示为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;
}
?>

于 2013-03-17T21:36:26.497 回答
0

为什么不在表格的单元格中包含一个 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>
于 2013-03-17T21:37:39.583 回答