Foundation - 根据Foundation的断点重新组织块。

Question

这里是我想做的事的粗略比例。

正如你所看到的，我想把我的三个块做成几个 "组织"。

• 在这里，我想把我的三个区块做成几个 "组织"：在 大号 屏幕（和更大的），我想让它们紧挨在一起。
• 关于 中型 屏幕，我希望第一和第三块在同一行，第二块在另一行。
• 关于 规模小 画面，我想让它们一个比一个低。

所以，问题出现在 媒介 第三块 需要 在第二块之前。

为了解决这个问题，我把第三块放了两次。

• 一个在第一块和第二块之间(类规则为 "只为中度显示")
• 第二块之后的另一块（类规则为 "只隐藏-中"）。

这给了我这个html（你可以看到它的行动 此处) :

<div class="row">
    <div class="small-12 medium-4 large-3 columns">
        <div class="panel">
            1
        </div>
    </div>

    <div class="show-for-medium-only medium-8 columns">
        <div class="panel">
            3
        </div>
    </div>

    <div class="small-12 medium-12 large-5 columns">
        <div class="panel">
            2
        </div>
    </div>

    <div class="hide-for-medium-only small-12 large-4 columns">
        <div class="panel">
            3
        </div>
    </div>
</div>

 

所以我的问题是: 有什么方法可以做到不重复第三块？不使用JavaScript基金会规则，最好是使用本地的基金会规则)

Answer 1

你可以使用 源排序 或从文档流中删除元素，用css和一些html模板将其分层排序。

http:/jsfiddle.netuw8U8

html.html和app.scss。

<div class="wrapper">
   <div class="row layer-1">
      <div class="small-12 medium-4 large-3 columns">
         <div class="panel first">
            1
         </div>
      </div>
      <div class="small-12 medium-8 large-4 large-offset-5 third-column  columns">
         <div class="panel dummy"></div>
         <div class="panel dummy"></div>
         <div class="panel third">
            3
         </div>
      </div>
   </div>
   <div class="row layer-2">
      <div class=" medium-12 large-5 large-offset-3 columns">
         <div class="panel second">
            2
         </div>
      </div>
   </div>
</div>

和app.scss

@import "settings";
@import "foundation";


.wrapper{
    position: relative;
    margin: auto;
    max-width: $row-width;
}

.panel{
    text-align: center;
    height: 1.5em;
    font-size: 1000%;
    color: white;
}

.first{
    background-color:#e64433;
}
.second{
    background-color:#09afb9; 
}
.third{
    background-color:#ed9a24; 
}


@media #{$large-up} {
    .layer-1, .layer-2{
        position: absolute;
    }
}

.dummy{
    display: none;
}
@media #{$small-only} {
    .third-column{
        position: absolute;
    }
    .dummy{
        display: block;
        visibility: hidden;
    }

}

或默认Foundation 5设置的css输出。

.wrapper {
  position: relative;
  margin: auto;
  max-width: 62.5rem;
}

/* line 11, ../scss/app.scss */
.panel {
  text-align: center;
  height: 1.5em;
  font-size: 1000%;
  color: white;
}

/* line 18, ../scss/app.scss */
.first {
  background-color: #e64433;
}

/* line 21, ../scss/app.scss */
.second {
  background-color: #09afb9;
}

/* line 24, ../scss/app.scss */
.third {
  background-color: #ed9a24;
}

@media only screen and (min-width: 64.063em) {
  /* line 30, ../scss/app.scss */
  .layer-1, .layer-2 {
    position: absolute;
  }
}
/* line 35, ../scss/app.scss */
.dummy {
  display: none;
}

@media only screen and (max-width: 40em) {
  /* line 39, ../scss/app.scss */
  .third-column {
    position: absolute;
  }

  /* line 42, ../scss/app.scss */
  .dummy {
    display: block;
    visibility: hidden;
  }
}

Answer 2

并不是一个真正面向基金会的答案，但随着 display: grid; 这个方案被广泛支持，应该可以和任何CSS框架一起使用，并且会让HTML更干净，CSS更灵活"■▄▄■▓（通过这样做，你也可以把样式放在HTML文档之外，这是一个很好的做法，对可维护性更好"■▄▄■▓）。

我们的想法是使用.NET技术重新创建一个12列的网格。

  display: grid;
  grid-template-columns: repeat(12, 1fr);

然后在相应的列数上使用.NET来跨接我们的面板。

  grid-column: span {{ number of column }};

这样我们就得到了这样的结果。

html, body {
  margin: 0;
  padding: 0;
}

.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr); /* 1fr = 1 column */
  grid-gap: 20px; /* gutter beetween each column and row */
  margin: 20px;
}
.panel {
  height: 180px;
  line-height: 180px;
  text-align: center;
  font-size: 50px;
  font-family: Impact, sans-serif;
  color: #fff;
}

/* large screen */
.panel:nth-child(1) {
  grid-column: span 3; /* 3 columns */
  background-color: #e64433;
}
.panel:nth-child(2) {
  grid-column: span 5; /* 5 columns */
  background-color: #09afb9;
}
.panel:nth-child(3) {
  grid-column: span 4;  /* 4 columns */
  background-color: #ed9a24;
}

/* medium screen */
@media (max-width: 1000px) {
  .panel:nth-child(1) {
    order: 1;
    grid-column: span 4;
  }
  .panel:nth-child(2) {
    order: 3;
    grid-column: span 12;
  }
  .panel:nth-child(3) {
    order: 2;
    grid-column: span 8;
  }
}

/* small screen */
@media (max-width: 600px) {
  .panel:nth-child(1) {
    order: 1;
    grid-column: span 12;
  }
  .panel:nth-child(2) {
    order: 2;
    grid-column: span 12;
  }
  .panel:nth-child(3) {
    order: 3;
    grid-column: span 12;
  }
}

<div class="grid">
  <div class="panel">
    1
  </div>
  <div class="panel">
    2
  </div>
  <div class="panel">
    3
  </div>
</div>

---

你也可以考虑 grid-template 和 grid-area 这是一个有点难以理解的第一眼，但可能会让你更多的创意，根据你的需求。

这就是结果。

html, body {
  margin: 0;
  padding: 0;
}

.grid {
  display: grid;
  grid-template: "pannel1 pannel2 pannel3" auto / 3fr 5fr 4fr;
  grid-gap: 20px;
  margin: 20px;
}
.panel {
  height: 180px;
  line-height: 180px;
  text-align: center;
  font-size: 50px;
  font-family: Impact, sans-serif;
  color: #fff;
}

/* large screen */
.panel:nth-child(1) {
  grid-area: pannel1;
  background-color: #e64433;
}
.panel:nth-child(2) {
  grid-area: pannel2;
  background-color: #09afb9;
}
.panel:nth-child(3) {
  grid-area: pannel3;
  background-color: #ed9a24;
}

/* medium screen */
@media (max-width: 1000px) {
  .grid {
    grid-template:
      "pannel1 pannel3" auto
      "pannel2 pannel2" auto / 1fr 2fr;
  }
}

/* small screen */
@media (max-width: 600px) {
  .grid {
    grid-template:
      "pannel1" auto
      "pannel2" auto
      "pannel3" auto / 1fr;
  }
}

<div class="grid">
  <div class="panel">
    1
  </div>
  <div class="panel">
    2
  </div>
  <div class="panel">
    3
  </div>
</div>

---

要注意的是，上面的解决方案保留了原始的文档流程，这意味着，如果你想在页面的焦点元素中 "Tab"，它将总是先于第三个面板进入第二个面板，即使你希望在中等屏幕上先于第二个面板进入第三个面板。

如果这对你来说是个问题，你需要JS来自动更新你的面板上的tabindex属性，或者在HTML DOM本身中重新排列元素，如果使用JS不能解决你的问题，那么我想原帖中的代码例子是唯一的办法。

但是请记住，根据屏幕的大小重新排列DOM中的项目，对于无障碍性来说不一定是个好主意。

视觉上重新排列网格项并不会影响顺序导航模式的默认遍历顺序（比如循环浏览链接）。 [CSS网格布局和可访问性]