1

Zurb Foundation 4 Gridを使用してレスポンシブ レイアウトを作成しようとしていますが、モバイルとデスクトップの両方でコンテンツを適切に並べ替えるプッシュプルを使用して列レイアウトを作成する方法に頭を悩ませています。 javascript に変換するか、「hide-for-small/hide-for-large」クラスの DIV でデータを複製します。

「モバイル ファースト」の哲学に従って、イベント サイトに次のような望ましいレイアウトがあるとします。

モバイル：

12 columns
========================
[Name / Date / Location]
[Photo                 ]
[Event details         ]
[Attendees             ]
[RSVP                  ]
[Edit link             ]

デスクトップ：

4 columns          8 columns
=============================================
[Photo     ]    |   [Name / Date / Location ]
[RSVP      ]    |   [Event details          ]
[Edit Link ]    |   [Attendees              ]

両方の状況で適切な順序で表示されるように HTML をフォーマットするにはどうすればよいですか?

現在、私はモバイル用にこれを行っています：

<!-- note: there are many ways to create this layout -
           it could be in sets of individual rows as well -->
<div class="row">
  <div class="small-12 columns">
      <div class="namedatelocation">(name/date/location html)</div>
  </div>
  <div class="small-12 columns">
      <div class="photo">(photo html)</div>
  </div>
  <div class="small-12 columns">
      <div class="details">(details html)</div>
  </div>
  <div class="small-12 columns">
      <div class="attendees">(attendees html)</div>
  </div>
  <div class="small-12 columns">
      <div class="rsvp">(rsvp html)</div>
  </div>
  <div class="small-12 columns">
      <div class="edit">(edit html)</div>
  </div>
</div>

そして、デスクトップでこれを行うことができます：

<div class="row">
  <div class="large-4 columns">
      <div class="photo">(photo html)</div>
      <div class="rsvp">(rsvp html)</div>
      <div class="edit">(edit html)</div>
  </div>
  <div class="large-8 columns">
      <div class="namedatelocation">(name/date/location html)</div>
      <div class="details">(details html)</div>
      <div class="attendees">(attendees html)</div>
  </div>
</div>

このコンテンツをレスポンシブな方法で作成するにはどうすればよいですか? これまでに達成できた最善の方法は、コンテンツを「ペア」に分割し、各ペアを独自の行に配置し、プッシュプルを使用して行内の 2 列の順序を変更することです。このアプローチの問題は、ペアの並べ替えのみの制限に加えて、各行の高さがその行の 2 つの列の中で最も高いものに等しいことです。これは、デスクトップ レイアウトに大量のデッド スペースがあることを意味します。

私がやろうとしていることをどのように達成できるかについてのアイデアはありますか? それともファウンデーションではできないのですか？そうでない場合、一般的にこの問題に対処する適切な方法は何でしょうか?

4

1 に答える 1

2

F3 で使用されている方法と同様に、プッシュ クラスとプル クラスを引き続き使用できます。Foundation のドキュメント ページでソースの順序セクションを読むことができます。問題を解決する方法は次のとおりです。

<div class="row">
      <div class="large-8 push-4 small-12 columns">
          <div class="namedatelocation">(name/date/location html)</div>
      </div>
      <div class="large-4 pull-8 small-12 columns">
          <div class="photo">(photo html)</div>
      </div>
      <div class="large-8 push-4 small-12 columns">
          <div class="details">(details html)</div>
      </div>
        <div class="large-4 pull-8 small-12 columns rsvp">
          <div class="rsvp">(rsvp html)</div>
      </div>
      <div class="large-8 push-4 small-12 columns attendees">
          <div class="attendees">(attendees html)</div>
      </div>

      <div class="large-4 pull-8 small-12 columns">
          <div class="edit">(edit html)</div>
      </div>
    </div>

これはデスクトップ用です。難しいのは、モバイル用にどのように表示するかです。プルとプッシュを使用すると、デスクトップ ビューに簡単に取り組むことができるため、最初にデスクトップに取り組むことに注意してください。モバイル ビューをレイアウトするには、いくつかの css を実行する必要がありますが、実際にはそれを行う Foundation の方法はありません。解決策として、たとえば、divの「定義された高さ」があり、高さが30pxに設定されていると仮定すると、次のスタイルを追加できます。

.row .small-12.rsvp {
    margin-top: 30px;
}
.row .small-12.attendees {
    margin-top: -30px;
}

注: クラスrsvpとattendeesを 2 つの小さな 12 div、4 番目と 5 番目の div にそれぞれ追加したことに注意してください。

于 2013-03-21T02:43:44.010 に答える