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）可以调整大小，并且可以变小，比如100px，这就是我遇到问题的地方，#center div保持在右边，即使在容器外面也是如此：

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

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

感谢您的帮助！

Answer 1

好的，我使用“flex”来做，在我的3个元素上，这是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/
我真的希望我帮助