html - 将两个 div 从较小屏幕上的列格式重新定位到较宽屏幕上的单行

Question

我使用 flexbox 制作了一个足球记分牌的基本布局。

该 View 有两个独立的 View :大屏幕和小屏幕。

这是大屏幕布局的样子:

这是小屏幕布局的样子:

我的问题是:在大屏幕布局上，什么是能够定位 corner-a 和 corner-b 的好方法以便它们与 carded-players 行齐平，同时保持小屏幕上的布局？

我遇到的困难是，在小屏幕上，感觉我应该将两个 corner div 包装在它们自己的 corners 包装器中，就像这种情况一样眼下。在大屏幕上，感觉这两个 div 不应该有 corners 包装器，而应该单独位于 wrap 容器的 Angular 落。

在不复制 HTML 的情况下解决这个问题的好方法是什么？

CSS(从 SCSS 编译而来):

@media (min-width: 601px) {
  .desktop-hide {
    display: none !important;
  }
}

@media (max-width: 600px) {
  .mobile-hide {
    display: none !important;
  }
}

* {
  box-sizing: border-box;
}

.wrapper {
  border: 1px solid seagreen;
  max-width: 800px;
  display: flex;
  flex-flow: column wrap;
  align-items: center;
}

.main {
  display: flex;
  flex-flow: row;
  max-width: 600px;
  min-width: 550px;
  border: 1px solid orangered;
}

.timer {
  display: flex;
  justify-content: center;
}

.left-col, .right-col {
  max-width: 300px;
}

* {
  box-sizing: border-box;
}

.team {
  background: chartreuse;
}

.score {
  background: brown;
}

.scorers {
  background: steelblue;
}

.cards-desktop {
  background: goldenrod;
}

.carded-players {
  background: darkorange;
}

.left-col, .right-col {
  width: 80%;
  margin: auto;
}

.left-col * >, .right-col * > {
  display: flex;
}

.top > div {
  padding: 5px;
}

.bottom > div {
  height: 25px;
}

.top {
  display: flex;
  flex-flow: column wrap;
  height: 100px;
}

.team,
.scorers {
  height: 50%;
  width: 75%;
}

.score {
  width: 25%;
  display: flex;
  flex: 0 0 100%;
  align-items: center;
  justify-content: center;
  font-size: 28px;
}

@media (max-width: 600px) {
  .main {
    min-width: 100%;
  }

  .top {
    flex-flow: column nowrap;
    height: initial;
  }

  .team, .scorers {
    height: initial;
    width: 100%;
  }

  .score {
    flex: 1 100px;
    align-self: flex-end;
  }

  .scorers {
    order: 1;
  }
}

.right-col .score {
  align-self: flex-end;
}

.right-col .top {
  flex-flow: column wrap-reverse;
}

.left-col .top > *:not(.score), .left-col .bottom > * {
  display: flex;
  justify-content: flex-end;
}

.team, .scorers {
  display: flex;
  align-items: center;
}

.empty {
  height: 28px;
}

.colon {
  height: 95px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 100px;
}

.corners {
  display: flex;
  flex-flow: row;
  width: 100%;
  justify-content: space-between;
}

.corner-left, .corner-right {
  border: 1px solid crimson;
}

Codepen 链接:http://codepen.io/alanbuchanan/pen/dMgJZg?editors=1100

Answer 1

通过结合使用 CSS 定位和媒体查询，可以实现您想要的布局。

首先，您可以去掉所有这些不必要的代码:

重复的 html(桌面版和移动版)

<!-- REMOVE
<div class="corner-a mobile-hide">corner a</div>
<div class="corner-b mobile-hide">corner b</div>
<div class="corners desktop-hide">
     <div class="corner-left">corner-a</div>
     <div class="corner-right">corner-b</div>
</div>
-->

正如您在问题中所建议的那样，使用重复的 HTML 并不是最佳解决方案。

同时删除过时的 css

/* 
@media (min-width: 601px) {
     .desktop-hide {
          display: none !important;
     }
}
@media (max-width: 600px) {
     .mobile-hide {
          display: none !important;
     }
}
*/

---

其次，将 Angular 元素添加为 .left-col 和 .right-col 的最后一个子元素。

<div class="left-col">
     <div class="top"> ...  </div>
     <div class="bottom"> ...  </div>
     <div class="corner-a">corner a</div><!-- new location -->
</div>

<div class="right-col">
     <div class="top"> ...  </div>
     <div class="bottom"> ...  </div>
     <div class="corner-b">corner b</div><!-- new location -->
</div>

---

第三，通过使父容器成为 flex 容器，使 Angular 能够接受 flex 属性:

.left-col,
.right-col {
     display: flex;               /* new */
     flex-direction: column;      /* new */
     max-width: 300px;
     width: 80%;
     margin: auto;
}

---

第四，为小屏幕设置边 Angular 样式:

@media (max-width: 600px) {

     .corner-a {
          align-self: flex-start;
          position: static;
     }

     .corner-b {
          align-self: flex-end;
          position: static;
     }

}

---

第五，为更宽的屏幕设置边 Angular 样式。

.wrapper {
     border: 1px solid seagreen;
     max-width: 800px;
     display: flex;
     flex-flow: column wrap;
     align-items: center;
     position: relative;    /* new */
}

.corner-a {
     position: absolute;
     left: 0;
     bottom: 0;
  }

.corner-b {
     position: absolute;
     right: 0;
     bottom: 0;
}

---

注意事项:

• 对于较小的屏幕， Angular 落根据文档流定位在布局中。它们与 flex 属性保持一致。

• 对于更宽的屏幕， Angular 点会从文档流中移除并使用绝对定位。然后将它们定位在它们的容器中(定义为最近定位的祖先元素)。这将是 .wrapper。在较小的屏幕上，边 Angular 通过 position: static 恢复到正常流动。

Revised Codepen