2016-03-22 12 views
1

私は以下のループを持ち、あるページからの結果を示しています。これは私のような結果を示しているループ内のテーブル動的値

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つのアポイントメントがあります(1日の異なる時間帯に)。

私の質問: 2つの予定では、画面は表示されません。 しかし、すべての部屋にアポイントがあると、ページが非常に長くなります。同じ部屋のすべての任命は、その部屋の他の隣になるように

Room 1 
    Subject    Subject 
      startTime   startTime 
      endTime    endTime 
      totalTime   totalTime 

Room 2 

Room 3 

Room 4 

:私が望む何

はこのようなものです。

ループ中にこれを行うにはどうすればよいですか?

+0

あなたは、レイアウトのその種のために ''

が必要に(なります)。 – NaijaProgrammer

+1

@NaijaProgrammer全くありません。ありがたいことに、私たちはもう90年代ではありません。 –

答えて

4

最初に、<div class="meeting">を会議ループの最初のエコーの先頭に追加することによって、会議全体を<div>タグで囲みます。その後、会議ループ内の最後のエコーの最後に終了</div>を追加します。そして、あなたはこれを正しく表示するには、次のようないくつかのCSSスタイルを使用することができます。

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

これは彼らがインライン座るようになります - あなたはあなたの好みに幅を調整することができます。

編集

あなたでし使用山車(float:left)それが追加clearfixの要件と複雑さのまったく新しいレベルだが、あなたが望むなら、あなたはここでその上で詳細を読むことができます:

What is a clearfix?

+0

Oh wauw、これはそれでした。私は今、そんなに馬鹿だと感じる...しかし、ありがとう! – Mitch

+0

ボール、私はスニペットの書き込みに気を配り、貴重な時間を失ってはいけません。 =) – klaar

1

ラップ(何が好きか<div class='subject'>、)<section class='subject'>独自の内部同じ部屋内の各対象とするためにCSS(display: inline-block;)を使用しますそれらの人々はお互いの下ではなく、お互いに隣り合っています。

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

関連する問題