Question

我有3个元素：A，B和C。

在移动设备上，我想要这个：

AA
AA
BB
BB
CC
CC

在台式机上，我想要这样：

AABB
AABB
CCBB
CCBB

我该怎么做？

Answer 1

您已标记了此flexbox，但是所需的布局是2维的，因此您应该使用css-grid。

用媒体查询替换下面示例中的类。

document.querySelector("button").addEventListener("click", () => document.body.classList.toggle("desktop"));

div {
  font-size: 20px;
  padding: 10px;
  text-align: center;
}

#a {
  background: red;
  color: white;
  grid-area: grid-a;
}

#b {
  background: green;
  color: black;
  grid-area: grid-b;
}

#c {
  background: black;
  color: white;
  grid-area: grid-c;
}

.desktop main {
  display: grid;
  grid-template-columns: auto-fit auto-fit;
  grid-template-rows: auto-fit auto-fit;
  grid-template-areas: "grid-a grid-b" "grid-c grid-b";
}

<main>
  <div id="a">A</div>
  <div id="b">B</div>
  <div id="c">C</div>
</main>

<button>toggle</button>

Answer 2

如果您可以重新组织标记，则可以使用以下方法。

#wrap {
  width: 100%;
  background: black;
}

.AA, .CC {
  background: gray;
}

.BB {
  background: lightgray;
}

/* use media query to style for desktop */
.desktop {
  overflow: auto;
}

.desktop > div {
  display: inline-block;
}

.desktop .AA, 
.desktop .CC {
  float: left;
  width: 75%;
}

.desktop .BB {
  width: 25%;
}

<p><button onClick="document.getElementById('wrap').classList.toggle('desktop')">Toggle Layout</button></p>

<div id="wrap" class="desktop">
  <div class="AA">AA</div>
  <div class="AA">AA</div>
  <div class="BB">BB</div>
  <div class="BB">BB</div>
  <div class="CC">CC</div>
  <div class="CC">CC</div>
  <div class="BB">BB</div>
  <div class="BB">BB</div>
</div>

如何实现这种自适应布局

2 个答案: