CSS - 打破浮动和不可包装的div

Question

好的，这很难解释，我有 2 个元素，一个浮动 div 和一个不可包装的 div，它的 HTML 看起来像这样：

<div id='page'>
  <div id='left'>
    some information
  </div>
  <div id='center'>
    do not break this
  </div>
</div>

这是 CSS：

#center{
  text-align: center;
  white-space: nowrap;
}
#left{
  float:left;
}
#page{
  width: 800px;
  background-color: #999;
}

结果：

容器 (#page) 可调整大小，并且可以变小，例如 100 像素，这就是我的问题所在，#center div 保持在右侧，即使在容器外部也是如此：

当容器像这样小的时候，我需要 #center div 放在 #left 下：

这是 jsfiddle 上的代码：https://jsfiddle.net/p41xh4o3/

感谢您的帮助！

Answer 1

好的，我在我的 3 个元素上使用了“flex”，这是 CSS：

#left{
  white-space: nowrap;  
  flex-grow: 0;
}
#center{
  text-align: center;
  white-space: nowrap;
  background-color: #88AA88;
  flex-grow: 1;
}
#page{
  width: 100px;
  background-color: #999;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

这是 jsfiddle：https://jsfiddle.net/p41xh4o3/2/

Answer 2

我是使用 flexbox 完成的，首先你必须在父级上执行 display: flex; 和 flex-wrap: wrap。
像这样：

#page{
  background-color: #999;
  display: flex; // this one makes it a flex box
  flex-wrap: wrap;  // this one tells it to wrap when all children cannot fit next to each other
}

那么你必须为父母的两个孩子提供flex-basis: 50%：

#center{
  flex-basis: 50%;
  background-color: red;
}
#left{
  float:left;
  flex-basis: 50%;
  background-color: green;
}

我给了它们背景，这样你就可以看到它们并了解它是如何工作的。将 flex-basis 视为元素的宽度。因此，如果您希望 #left 具有宽度：30%，您可以执行以下操作：

#center{
  flex-basis: 70%; // notice how this one is 70% because 100% - 30% = 70%
  background-color: red;
}
#left{
  float:left;
  flex-basis: 30%;
  background-color: green;
}

这是一个有效的 jsfiddle： https://jsfiddle.net/odnecaLu/4/
我真的希望我能帮上忙