html - 在 div 下 float 文本

Question

你好，我有这个代码:

.wrapper {
  width: 100%;
  border: 3px solid black;
  display: flex;
}
.myText {
  width: 50%;
  background-color: yellow;
}
.box {
  width: 50%;
  height: 50px;
  background-color: orange;
}

<div class="wrapper">
  <div class="myText">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
  <div class="box"></div>
</div>

我的目标是，黄色框内的文本 float 在橙色框下方(如果它像示例中那样太长。像这样:

我不知道该怎么做，而且我没有在互联网上找到任何解决方案。有任何想法吗？谢谢

Answer 1

尝试将 .box 放在顶部并 float: right;。

.wrapper {
  border: 3px solid black;
  text-align: justify;
}
.myText {
  background-color: yellow;
}
.box {
  width: 50%;
  height: 50px;
  background-color: orange;
  float: right;
}

<div class="wrapper">
  <div class="box"></div>
  <div class="myText">
    Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata
    sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
    Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
  </div>
</div>