循环动态值表答案

【问题标题】：Table in loop dynamic values循环动态值表
【发布时间】：2016-07-09 05:07:37
【问题描述】：

我有以下循环，显示来自某个页面的结果。

foreach($json->rooms as $room)
{
    echo '<p><b>' . $room->name . '</b></p>';

    foreach($room->meetings as $meeting)
    {
        echo '<p><b>' . $meeting->subject . '</b></p>'; 
        echo '<p><b>Organizor:</b> ' . $meeting->organizer . '</p>';
        echo '<p><b>Start:</b> ' . $meeting->start . '</p>';
        echo '<p><b>End:</b> ' . $meeting->end . '</p>';
        echo '<p><b>Duration:</b> ' . $meeting->duration . '</p>';          
    }
}

这向我显示了如下结果：

Room 1
     Subject
          startTime
          endTime
          totalTime 
     Subject
          startTime
          endTime
          totalTime  Room 2
Room 2

Room 3

Room 4

如您所见，我们有 4 个房间。 1 个房间有 2 次约会（一天中的不同时间）。

我的问题：只有 2 个约会，屏幕不会被填满。但是，如果我们在每个房间都有约会，页面会变得很长。

我想要的是这样的：

Room 1
     Subject              Subject
          startTime            startTime
          endTime              endTime
          totalTime            totalTime

Room 2

Room 3

Room 4

这样，同一个房间的每个约会都将与该房间的另一个约会相邻。

当它处于循环中时我该怎么做？

【问题讨论】：

您（将）需要<table> 来进行这种布局。
@NaijaProgrammer 一点也不——幸好我们已经不是九十年代了。

标签： php jquery html css loops

【解决方案1】：

首先，通过将<div class="meeting"> 添加到会议循环中第一个回显的开头，将整个会议包含在<div> 标记中。然后在会议循环中最后一个回显的末尾添加一个结束 </div>。然后你可以使用如下的 CSS 样式来正确显示它：

.meeting {
    width:200px;
    display:inline-block;
}

这将使它们内联 - 您可以根据自己的喜好调整宽度。

编辑

您可以使用浮点数 (float:left)，但这增加了一个全新级别的复杂性，需要 clearfix，但如果您愿意，可以在此处阅读更多信息：

What is a clearfix?

【讨论】：

哦哇哦，它做到了。我现在觉得自己很愚蠢......但是谢谢！
Balls，我不应该费心写一个 sn-p 从而浪费宝贵的时间。 =)

【解决方案2】：

将同一房间中的每个主题包裹在其自己的<section class='subject'>（或<div class='subject'>，随你喜欢）中，并使用CSS（display: inline-block;）使这些<section>彼此相邻而不是彼此下方。

.subject {
  border: 1px solid #888;
  display: inline-block;
}

<h1>Schedule</h1>
<section class='room'>
  <h2>Room 1</h2>
  <section class='subject'>
    <h3>Subject 1.1</h3>
    <time>start</time>
    <time>end</time>
    <time>total</time>
  </section>
  <section class='subject'>
    <h3>Subject 1.2</h3>
    <time>start</time>
    <time>end</time>
    <time>total</time>
  </section>
</section>
<section class='room'>
  <h2>Room 2</h2>
</section>
<section class='room'>
  <h2>Room 3</h2>
  <section class='subject'>
    <h3>Subject 3.1</h3>
    <time>start</time>
    <time>end</time>
    <time>total</time>
  </section>
  <section class='subject'>
    <h3>Subject 3.2</h3>
    <time>start</time>
    <time>end</time>
    <time>total</time>
  </section>
</section>
<section class='room'>
  <h2>Room 4</h2>
</section>

【讨论】：