如何使div中的文本環繞另一個div，並使用img和其中的文本

如何使div中的文本環繞另一個div並浮動或內聯塊不工作。這就是我想要的。如何使div中的文本環繞另一個div，並使用img和其中的文本

     ________ 
_____________________|  |_ 
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    |

來源

2017-04-19 dumax315

這應該是非常直截了當的。只需浮動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>

來源

2017-04-19 16:47:12

嘗試使用Ppadding /保證金 - 我已經爲我們樹立了一個代碼筆在這裏：

Codepen

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; 
}

來源

2017-04-19 16:57:07

你可以讓他們兩個單獨的div和應用浮到第一個div具有固定寬度和高度。那就是：

HTML

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

然後在你的CSS

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

這裏有一個fiddle

來源

2017-04-19 17:39:56

如何使div中的文本環繞另一個div，並使用img和其中的文本

回答

相關問題