css - 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

我是用 f​​lexbox 做的，首先你必须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有 width: 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/ 我真的希望我有所帮助

Answer 2

好的，我在我的 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/