css - 仅当第二个 div 适合第一个时，才将其 float 到右侧

Question

我有以下(简化的)html 和 css:

<div class="container">
  <div class="one">Some text for div 1</div>
  <div class="two">Some text for div 2</div>
</div>

<style>
  .two {float: right}
</style>

当两个元素都放在容器中时，我希望它看起来像；

Some text for div 1                                                     Some text for div 2

但是，当它们不适合彼此相邻时，我希望删除第二个 div 的 float ，例如；

Some text for div 1
Some text for div 2

我怎样才能做到这一点？

Answer 1

Flexbox 可以做到这一点；

.parent {
  border: 1px solid red;
  margin: 1em auto;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.skinny {
  width: 60%;
}
.left {
  height: 50px;
  background: green;
  flex: 0 0 250px
}
.right {
  height: 50px;
  background: pink;
  flex: 0 0 250px;
}

<div class="parent">
  <div class="left"></div>
  <div class="right"></div>
</div>

<div class="parent skinny">
  <div class="left"></div>
  <div class="right"></div>
</div>