图片与文字的排版比例要遵循黄金分割原理1：0.618黄金分割比是我们很早的时候就有学习到的，这也是目前在世界范围内都公认的最好构图比例，黄金分割率的页面比例可以给人带来视觉上的美感。这个是css图文混排的关键核心。
图文混排是版式设计中最常见的情况，图片与文字在传达版面信息上具有不同的特点，图片在视觉传达上可以辅助文字。
图文混排有很多种方法。这里举例几个：第一种方法是背景图片法
这种方法适用于非动态内容，图片用于装饰的情况下。主要是设置父元素的padding的宽度为背景图片的宽度加上图片和文字的间距，然后把背景图片定位到padding里面就可以了。
第二种方法是浮动法
这种方法比较灵活，应该是float的经典应用了。思路是对左右元素都设置浮动和宽度。但是一定要注意清除子元素的浮动及ie6的双倍margin，不然会出现错误效果或影响其他元素的布局
第三种方法是overflow法
这种方法的html代码和浮动法一样，在这里只是id变了下方便测试demo。其思路是左边元素浮动，而对右边元素设置overflow为hidden，一样完美兼容（注意在ie6下左边元素浮动，右边元素没有浮动会有3px的间距）
下面图片高度固定为68，如果你设置li宽度100那么就多出32像素。三亚这两个字不超过32像素，就排在一行。
要么在图片下面加个换行
要么把图片宽设为100%
