如何制作两列 - 一个灵活 - 在必要时包装？

Question

我需要两个列，基本上是并排的块，在必要时用于响应式设计。

我遇到的问题是第一列/块是静态大小的，但第二列/块需要填充剩余的宽度。但是，它们仍然应该在必要时包装。

假设最左边的块的静态宽度为200px，而最右边的块填充剩余的宽度，但是最小宽度为300px。这样它应该在必要时包裹（第二个块放在第一个块下面而不是右侧）。

我尝试了各种方法无济于事 - 浮动左侧区块，使用绝对位置等，但我无法得到我正在寻找的结果。

希望它可能单独使用CSS，而不是使用CSS3媒体查询来显示/隐藏两个不同的版本。或者诉诸JS ......：P

Answer 1

你想要this

之类的东西吗？

HTML

<div class="outer">
    <div class="leftBar">Test</div>
  <div class="rightCnt"></div>
</div>

CSS

* {margin: 0}
.leftBar {
  width: 200px;
  min-height: 600px;
  float: left;
  background: red;
}
.rightCnt {
  margin-left: 200px;
  min-height: 600px;
  background: yellow;
}

@media (max-width : 500px) {
  .leftBar {
    float: none;
    width: auto;
    min-height: 200px;
  }
  .rightCnt {
    margin-left: 0;
  }
}