仅当第二个 div 适合第一个时才向右浮动

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 的浮动，例如；

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>

Answer 2

没有 flexbox 和更多跨浏览器的我的变体

.container{
  font-size: 0;
  text-align: justify;
}
.container::after{
  content: "";
  display: inline-block;
  width: 100%;
  height: 0;
  visibility: hidden;
}
.class-1, .class-2{
  display: inline-block;
  font-size: 14px;
  text-align: left;
}

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

仅当第二个 div 适合第一个时才向右浮动

Float second div to right only when its fits next to the first

css

css-float