Question

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

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个房间。在一个房间里有2个约会（在一天的不同时间）。

我的问题：只有2个约会，屏幕将不会被填充。但如果我们在每个房间预约，页面将会很长。

我想要的是这样的事情：

Room 1
     Subject              Subject
          startTime            startTime
          endTime              endTime
          totalTime            totalTime

Room 2

Room 3

Room 4

因此，同一个房间的每次预约都将在那个房间的另一个旁边。

如何在循环中执行此操作？

Answer 1

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

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

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

修改

你可以使用浮点数（float:left），但是根据clearfix的要求添加了一个全新的复杂程度，但是你可以在这里阅读更多内容希望：

What is a clearfix?

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

表中的循环动态值

2 个答案: