当屏幕尺寸较小时，将 fixed-margin div below left-float div 移动

Question

我正在使用这个问题中推荐的方法，并且有两个 div：

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

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

左窗格占据固定的 300px 宽度，右窗格始终占据剩余宽度的 100% space。

我想在右窗格中添加“最小宽度”。当它低于 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>

当屏幕尺寸较小时，将 fixed-margin div below left-float div 移动

move fixed-margin div below left-float div when screen size is small

css

css-float

Codepen