如何在div中使文本環繞在另一個包含img和文本的div中

Question

如何使div中的文本環繞另一個div，並且float或inline-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

這確實應該很簡單。 只需將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> 

Answer 2

嘗試使用Ppadding / margin-我在這里設置了電筆：

碼筆

的HTML

    <div class="one">
  <div class="two">
    <img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcR2rju9r765Nbqd7MKVb2EGuAomXXBMqM5pBEhhLFiCnSjuP9R1eLLh5sU"/>
  </div>
  texttexttexttexttexttexttext<br/>texttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttexttext<br/>texttexttexttexttexttexttexttext<br/>texttexttexttexttexttexttexttexttexttexttexttexttexttext<br/>texttexttexttexttexttexttext
</div>

的CSS

.one{
  width:550px;
  height:200px;
  background-color:green;
  margin-top:50px;
  padding-right:100px;
  word-wrap:word-break;
}
.two{
  float:right;
  margin-right:-60px;
  margin-top:-40px;
  margin-left:10px;
}

Answer 3

您可以將它們設置為兩個單獨的div，然后以固定的寬度和高度將float應用於第一個div。 那是：

的HTML

<div class="a"></div>
<div class="b">TEXT TEXT TEXT<div>

然后在您的CSS中

.a {
  float: right;
  width: 150px;
  height: 150px;
}

這是一個小提琴