给被环绕的元素添加float: left即可:
<html>
<head>
<style type="text/css">
.div1{
float: left;
width: 100px;
background-color: #0f0;
word-break: break-all;
}
.div2{
width: 200px;
background-color: #00f;
word-break: break-all;
}
</style>
</head>
<body>
<div class = "div1">
aaaaaaaaaaaaaaaaaaa我被环绕了aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa
</div>
<div class = "div2">
1234567890qwertyuioplkjhgfdsazxcvbnm
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
bbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbbb
</div>
</body>
</html>
文字环绕的原因,这里面写的不是很详细,看完还是觉得没找到跟,暂时先这样稍后有时间在研究。
css text wrap,文字环绕效果很棒,值得研究。