CSS

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

好的，我在我的 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 做的，首先你必须在 parent 上做 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
}

然后你必须为parent的两个children提供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/
我真的希望我有所帮助

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

CSS - break a float and a non-wrappable div

nowrap

css-float