0

現在、Foundation 4 (ZURB) のクライアント向けに新しいページを開発しています。モバイル版とデスクトップ版があります。もちろん、どちらも同じ HTML を持ち、ブレークポイントに応じて CSS が変わるだけです。複雑な部分が来ます：

デスクトップ版

モバイル版

メニューがコンテンツの一番下にジャンプするようにするにはどうすればよいですか? これは、HTML 構造の簡略化されたバージョンです。純粋なcss /特定のFoundationクラスでこれを達成する方法について何か考えはありますか? 現時点では、次のように重複したコンテンツを扱っています。

<section class="large-16 push-8 columns">Article Section 1</section>
<nav class="large-8 pull-16 columns hide-for-small"><!-- my menu -->
<aside class="large-8 pull-16 columns">Image 1</aside>

<section class="large-16 push-8 columns">Article Section 2</section>
<aside class="large-8 pull-16 columns">Image 2</aside>
<nav class="column hide-for-large"><!-- same menu as above -->

前もって感謝します！

編集:各画像の上端をデスクトップの対応するセクションの上端に揃える必要があることを忘れていました。おそらく、重複コンテンツや JS を使用しないと解決策はありません。

4

1 に答える 1

0

複数の要素を使用することは理想的ではありませんが、メニューの位置を変更する方法は次のとおりです。位置が異なるため、画像に対して小さいサイズの表示と小さいサイズの非表示を使用する必要がありました。

CSS

 @media only screen and (min-width:768px){
    .menuNav{
       float:left;
    }
    .contentDiv{
       float:right;
    }
 }

HTML

 <div class="contentDiv large-8 small-12 columns"> 
    <section class="articleSection">
        <p>Article Section 1</p>
    </section>
    <aside class="img show-for-small">Image 1</aside>
    <section class="articleSection">
        <p>Article Section 2</p>
    </section>
    <aside class="img show-for-small">Image 2</aside>
  </div>
  <div class="menuNav large-4 small-12 columns">
    <ul class="navDiv side-nav">
      <li class="active"><a href="#">Link 1</a></li>
      <li><a href="#">Link 2</a></li>
      <li class="divider"></li>
      <li><a href="#">Link 3</a></li>
      <li><a href="#">Link 4</a></li>
    </ul>
    <aside class="img hide-for-small">Image 1</aside>
    <aside class="img hide-for-small">Image 2</aside>
  </div>

JSBin の例 http://jsbin.com/ovabel/5/edit

于 2013-06-27T11:33:48.743 に答える