在div下浮动文本

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>

我的目标是，黄色框内的文字浮在橙色框下面（如果它在例子中太长了。这样的东西：

我不知道如何做到这一点，我没有在互联网上找到任何解决方案。有任何想法吗？感谢

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>

Answer 2

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

<div class="wrapper">
  <div class="myText">
    <div class="box"></div>
    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>

Answer 3

我能想到的最简单的解决方案是你把橙色的盒子放在黄色的盒子里并且在写任何文字之前。像这样的东西

<div class="myText">
  <div class="box"></div>
     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>

您还必须在CSS中进行更改。使用box class添加这个属性。

float:right;