当屏幕尺寸较小时，将固定边距 div 移动到左浮动 div 下方

Question

我正在使用这个问题https://stackoverflow.com/a/468080/2981429 中推荐的方法，并且有两个 div：

#left-pane {
  float: "left";
  width: "300px";
}

#right-pane {
  margin-left: "300px";
}

左窗格占用固定的 300 像素宽度，右窗格始终占用 100% 的剩余空间。

我想在右侧窗格中添加“最小宽度”。当它低于大约 300 像素的宽度时，我想将其移动到左窗格下方。

当我尝试将min_width: 300px 实际添加到右窗格时，它只是无形地延伸到页面边界之外 - 它似乎无法到达浮动的左窗格下方。

---

Codepen

---

Answer 1

您可以使用 flexbox 进行布局。 您可以在MDN 上找到一个很好的起点。

当您使用小型设备时，您可以使用媒体查询来获取列上的 div。

例如：

@media (max-width: 600px) {
  .container{
    flex-direction:column;
  }
  #left,#right{
    flex: 0 1 100%;/* set the width to 100% for the 2 columns */
  }
}

.container{
  display:flex;
}
#left {
  flex:0 1 300px;
  height: 300px;
  background-color: blue;
}

#right {
  flex:1 1 auto;
  height: 300px;
  background-color: darkred;
}

<div class="container">
  <div id='left'></div>
  <div id='right'></div>
</div> 

Answer 2

这不是float 的工作。你需要flex 这个实例。

.container {
  display: flex;
  flex-flow: row nowrap;
  width: 100%;
 }

#left-pane {
  width: 300px;
  min-width: 300px;
}

@media only screen and (max-width: 300px) {
  .container {
    flex-flow: column;
  }
}

使用flex 为您提供了许多新的布局和响应式选项，您可以在此处阅读更多内容：https://css-tricks.com/snippets/css/a-guide-to-flexbox/

Answer 3

.parent {
  display: flex;
}
#left {
  float: left;
  width: 300px;
  height: 300px;
  background-color: blue;
}

#right {
  height: 300px;
  background-color: darkred;
  width: calc(100% - 300px);
}

@media (max-width: 600px) {
  .parent {
    flex-direction: column;
  }
  #left,
  #right {
    width: 100%;
  }
}

<div class="parent">
  <div id='left'></div>
  <div id='right'></div>
</div>