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

Question

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

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

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

左窗格占据了300px的固定宽度，而右窗格始终占据了100％的剩余空间。

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

[当我尝试将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 {
    width: 100%;
  }
  #right {
    width: 100%;
  }
}

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