html - 你如何使一个div中的文本环绕另一个带有img和文本的div

Question

如何使一个 div 中的文本环绕另一个 div 和 float 或内联 block 不起作用。 这就是我想要的。

                      ________
_____________________|        |_
 Div: text text text |  img   | |
 text test text text |separate| |
 text test text text |   div  | |
 text test text text  --------  |
text test text text text test   |

这就是我的。

                      ________
_____________________|        |_
 Div: text text text |  img   | |
 text test text text |separate| |
 text test text text |   div  | |
 text test text text  --------  |
text test text text             |
text test text text             |
text test text text             |

Answer 1

这应该非常简单。只需 float div 或 img 并应用负的 margin。

body{background: red;}

div {
  width: 300px;
  margin: 40px auto 0;
  background: #fff;
}

img {
  float: right;
  margin: -20px 0 0 0;
}

<div>
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=150%C3%97150&w=150&h=150"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut laoreet massa nec massa commodo pretium. Proin vehicula enim ultrices nibh cursus commodo. Morbi orci
  purus, posuere vel erat sit amet, viverra condimentum velit. Ut tincidunt mi ac ornare finibus. In vehicula, dolor ut rutrum egestas, lorem orci pulvinar velit, vel rutrum urna massa et augue. Integer vel dapibus diam. Quisque lorem sem, feugiat sed
  accumsan non, condimentum vel est. Sed at ipsum nec eros pellentesque ullamcorper sed a eros. In in posuere dui. Suspendisse potenti. Quisque interdum, arcu eu congue lobortis, est metus consectetur tellus, nec sollicitudin justo mauris vehicula nunc.
  Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae;

</div>