在单独的行上浮动div 100宽度

Question

我正在尝试实现以下浮动布局：

两个内部div（红色+绿色）应使用外部div总宽度的60％和40％彼此相邻放置。

每当调整窗口大小以使绿色和红色内容不适合一行时，每个内部div应该是其自己的行，其具有外部div宽度的100％。

编辑： 我不知道，什么时候调整大小应该是donw。这取决于div的内容。在我的情况下2动态创建表。每当表格可以彼此相邻显示时，它们应该放在一行上。每当他们不这样做（因为列数太多，长篇文章等），他们应该分成两行。媒体解决方案（固定断点因此在这里没有帮助我）。不知道这是否可以仅使用css，或者我需要在这里包含一些js？

只能使用css / html访问吗？

Answer 1

只需要媒体查询即可实现。您可以使用另一个CSS文件，您可以将所有CSS保存为移动设备（包括iPad和平板电脑）。 您也可以使用CSS框架，例如Bootstrap，foundation和materializecssm，他们已经解决了这种情况。

样品：

//mobiles
@media (max-width: 479px) {
  .red{width:100%} 
  .green{width:100%}
}
//mobiles to ipad/tablet
@media (min-width: 480px) and (max-width: 767px) {
   .red{width:100%} 
   .green{width:100%} 
}

//laptop
@media (min-width: 768px) and (max-width: 991px) {
    .red{width:60%} 
    .green{width:40%}
}
//small monitors
@media (min-width: 993px) and (max-width: 1059px) {
    .red{width:60%} 
    .green{width:40%}
}
//standard to large monitors
@media (min-width: 1060px) and (max-width: 1199px) {
    .red{width:60%} 
    .green{width:40%}
}
//large monitors
@media (min-width: 1200px) {
    .red{width:60%} 
    .green{width:40%}
} 

Answer 2

你可以使用flexbox布局非常接近，但是当包装和滚动同时发生时，两行的宽度将不同。我认为如果需要，你需要使用媒体查询或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