html - 在单独的行上 float div 100 宽度

Question

我正在尝试实现以下 float 布局:

两个内部 div(红色 + 绿色)应使用外部 div 总宽度的 60% 和 40% 并排放置。

每当调整窗口大小时，绿色和红色内容无法放在一行中时，每个内部 div 都应该拥有其自己的行，其宽度为外部 div 的 100%。

编辑:我不知道，什么时候调整大小应该是downw。这取决于 div 的内容。在我的例子中有 2 个动态创建的表。只要表格可以彼此相邻显示，它们就应该放在 1 行上。每当他们不这样做时(因为列太多，文本太长等)，他们应该分成两行。媒体解决方案(具有固定断点，因此在这里对我没有帮助)。不知道仅使用 css 是否可行，还是我确实需要在此处包含一些 js？

这是否仅使用 css/html 就可以访问？

Answer 1

您可以非常接近 flexbox 布局，但是当 wrap 和 scroll 同时发生时，两行的宽度不会相同。我认为如果需要，您需要使用媒体查询或 Javascript 来解决这个问题。

.container {
  display: flex;
  flex-wrap: wrap;
}
.item {
  height: 100px;
}
.item-1 {
  background: aqua;
  flex: 1 1 60%;
}
.item-2 {
  background: gold;
  flex: 1 1 40%;
}

<div class="container">
  <div class="item item-1">
    <div style="width:600px;">1</div>
  </div>
  <div class="item item-2">
    <div style="width:400px;">2</div>
  </div>
</div>

jsFiddle