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

虽然仍然使用多个元素并不理想，但这里是您可以使菜单更改位置的方法。由于位置不同，我仍然不得不在图像上使用 show-for-small 和 hide-for-small。

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 回答