图文混排

以下效果，仅测试了 Chrome 及 IE 

简单实现：将图片左浮动即可。

html结构：

<div>
        <img src="images/baidu_logo.gif" alt="baidu" style="" />
        这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文
这是一段中文这是一段中文这是一段中文这是一段中文这是一段中文
</div>

 

css：

<style type="text/css">
div {
width: 200px;
height: 300px;
border: 1px solid #666;
}
div img {
float: left;
margin: 10px 10px 10px 5px;
}
</style>

  

问题：当容器中的文字是字母或数字时，需要在div添加 另外一个样式属性

有2个样式属性可用：word-break: break-all ;   与   word-wrap:break-word;

 

经测试，word-break: break-all ; 排版整齐美观，word-wrap:break-word; 排版些许错乱的感觉。

html结构：

<div>
    <img src="images/baidu_logo.gif" alt="baidu" style="float:left;" />
    121212 32 32 32 3 2 32 32323 232 
</div>

 

图示：

图片虽差别不明显，但  word-wrap:break-word;  在遇到 空格或其它如逗号此类的符号时，可以换行的情况，就会换行，这会导致换行的地方并未与前面的地方对齐，造成排版丑陋。

 

与此效果相关链接：http://www.cnblogs.com/chejiang/p/4437457.html （处理图文混排）