我们可以并排浮动 2 个 div 并在它们下方浮动第三个吗？

Question

我想排列3个div，按屏幕宽度如下：

screen-width of < 500px的排列方式如下：

screen-width of > 500px 的排列方式如下：

我已经尝试在 > 500px 的屏幕尺寸下实现这一点，但我不知道如何使用相同的代码来实现

我的疑问是，我可以使用同一段代码来获得这两种安排还是有其他方法？可以用flexbox解决这个问题吗？

这里是sn-p：

.container {
  display: flex;
}

.divA {
  flex: 0 0 40%;
  align-self: flex-end;
}

.container-2 {
  display: flex;
  flex: 0 0 60%;
  flex-direction: column;
}

<div class="container">
  <div class="divA">
    A
  </div>
  <div class="container-2">
    <div class="divB">
      B
    </div>
    <div class="divC">
      C
    </div>
  </div>
</div>

Answer 1

编辑

在看到您的问题更新后、mediaquerie、flex、order 和一个伪来创建那个空白间隙应该足够了。仍然与.container 的每个 3 框直接子。

以全页模式运行代码 sn-p 并调整浏览器大小，演示的断点设置为 700px。

* {
  box-sizing: border-box;
  margin: 0;
}

.container {
  display: flex;
  flex-wrap: wrap;
}

.divA {
  background: lightgreen;
}

.divB {
  background: lightblue;
}

.divC {
  background: rgb(255, 255, 0);
}

.container>div,
.container:before {
  flex: 1;
  min-width: 40%;
  padding: 1em 0;
  text-align: center;
}

@media (min-width: 700px) {
  /* upadte here the px value where you swhitch to happen . 500px */
  .divA,
  .divC {
    order: 1;
    flex: 0 1 40%;
  }
  .container .divB,
  .container .divC {
    flex: 0 1 60%;
  }
  .container:before {
    content: "";
    flex: 0 1 40%;
  }
}

<div class="container">
  <div class="divA">
    A
  </div>
  <div class="divB">
    B
  </div>
  <div class="divC">
    C
  </div>
</div>

---

原始答案留在这里供参考

你可以从弹性布局切换到表格或网格布局，每个元素都作为兄弟，这里不需要额外的标记。

示例：flex/table，这将是浏览器仍然存在网格问题

.container {
  display: flex;
  flex-wrap: wrap;
}

.container>div {
  flex: 1;
  border: solid;
  min-width: 40%;
}


/* set here the width where you want switching layout */

@media screen and (max-width: 600px) {
  .container {
    display: table;
    width: 100%;
    table-layout: fixed;
    ;
  }
  .divA {
    display: table-cell;
    width: 50%;
  }

<div class="container">
  <div class="divA">
    A
  </div>
  <div class="divB">
    B
  </div>
  <div class="divC">
    C
  </div>
</div>

or grid (mind版本的IE部分支持grid，需要为每个child设置grid-row/grid-column或grid-area)

.container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
}

.container>div {
  border: solid;
}

.divC {
  grid-row: 2;
  grid-column:1 / span 2;
}


/* set here the width where you want switching layout */

@media screen and (max-width: 600px) {
  .divC {
    grid-row: 1 / span 2;
    grid-column: 1;
  }

<div class="container">
  <div class="divA">
    A
  </div>
  <div class="divB">
    B
  </div>
  <div class="divC">
    C
  </div>
</div>

Answer 2

如何：

这可以通过cssgrid来实现

如果你对网格解决方案持开放态度，你需要稍微改变你的 html 结构。 flex 是不可能的。

解决方案：

我会这样做：

.container {
  display: grid;
  grid-template-columns: 50% 50%;
  grid-template-rows: 200px 200px;
  grid-gap: 0;
}

.divA {
  background-color: lightgreen;
}

.divB {
  background-color: lightblue;
}

.divC {
  grid-column: 1 / span 2;
  background-color: yellow;
}

@media screen and (min-width: 500px) {
  .divA {
    grid-column: 2 / 1;
    grid-row: 2 / 2

  }
  .divB {
    grid-column: 2 / 2;
    grid-row: 1 / 1;
  }
  .divC {
    grid-column: 2 / 2;
    grid-row: 2 / 2;
  }
}

<div class="container">
  <div class="divA">
    A
  </div>
  <div class="divB">
    B
  </div>
  <div class="divC">
    C
  </div>
</div>

解释：

• grid-template-columns 让你定义你的列宽 网格元素，行的grid-template-rows 也是如此 高度。
• 对于每个网格元素，您可以指定它们应该有多少元素 跨度（例如表格单元格可以跨越列或行）与 grid-column。了解更多 here 或谷歌 这个性质。您的 divC 已跨越一列中的 2 个元素。
• 现在为了您的响应能力，编写一个媒体查询来定义您的 screen-width 的样式超过 500px，并重置您的 .divCs grid-column 和 grid-row 并为您的 .divA 添加相同的内容。 （因为这个元素现在连续跨越 2 个元素）