Question

这是我正在尝试做的粗略缩放：

Blocks reorganization on a responsive website

正如你所看到的，我想在我的三个街区中建立几个“组织”：

在大屏幕（及更大）屏幕上，我希望它们彼此相邻
在中等屏幕上，我希望第一个和第三个块位于同一行，第二个块位于另一行
在小屏幕上，我希望它们各自低于另一个

因此，问题出现在中屏幕上，第三个块需要在第二个块之前。

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

第一个区块和第二个区块之间的一个区域（类规则“仅显示媒体”）
第二个块之后的另一个（具有类别规则“hide-for-medium-only”）

这给了我这个html（你可以在行动here中看到它）：

<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 ，最好使用原生Foundation规则）

Answer 1

您可以使用source-ordering或从文档流中删除元素，并使用css和一些html样板文件对它们进行排序：

http://jsfiddle.net/uw8U8/

HTML：

<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;
    }

}

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

.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文档之外，这是一种很好的做法，并且对可维护性更好?）

想法是使用：重新创建12列的网格：

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

然后使用：

将我们的面板放在相应的列数上

  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>

请注意，上述解决方案将保留原始文档流，这意味着，如果您要“浏览”页面的可聚焦元素，即使您愿意，它也将始终在第三个面板之前进入第二个面板。希望在中型屏幕上先进入第三个面板。

如果这对您来说是个问题，则需要JS来自动更新面板上的tabindex属性，或者对HTML DOM本身中的元素重新排序，并且如果使用JS不是您的解决方案，那么我猜想原始文章中的代码示例是唯一的方法。

但是请记住，根据屏幕的大小重新排列DOM中的项目可能并不总是可访问性的好主意：

视觉上重新排列网格项不会影响顺序导航模式（例如，通过链接循环）的默认遍历顺序。
[{CSS Grid Layout and Accessibility]

基础 - 根据基础断点重新组织块

2 个答案: