表中的循环动态值

I have the following loop, showing me results from a certain page.

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>';          
    }
}

This shows me a result like:

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

Room 3

Room 4

As you can see, we have 4 rooms. in 1 room there are 2 appointments (at different times of the day).

My question: With only 2 appointments, the screen won't be filled alot. But if we have a appointment in every room, the page will get very long.

What i would like is something like this:

Room 1
     Subject              Subject
          startTime            startTime
          endTime              endTime
          totalTime            totalTime

Room 2

Room 3

Room 4

So that every appointment of the same room, will be next to the other of that room.

How do i do this while it is in a loop?

First, wrap the entire meeting in a <div> tag by adding <div class="meeting"> to the very start of the first echo in the meeting loop. Then add a closing </div> to the end of the last echo in the meeting loop. Then you can use some CSS styling like the following to display this correctly:

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

This will make them sit inline - you can adjust the width to your preference.

Edit

You could use floats (float:left) but that add's a whole new level of complexity with the requirements of a clearfix, but you can read more on that here if you wish:

What is a clearfix?

Wrap each subject in the same room inside its own <section class='subject'> (or <div class='subject'>, whatever you like) and use CSS (display: inline-block;) to make those <section>s go next to eachother instead of beneath eachother.

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

</div>