css的左图右文布局且保持图片宽高比例固定放缩

有一个常见需求：就是一个展示页上，左边显示一张图片，右侧加一些配套文字。效果如下：

当页面宽度增加时，图片响应变大，缩小时相应的变小。但图片的宽高比例不能改变。

这种布局，一般肯定可以用flex方法轻松实现，但考虑到兼容性的问题。不得不采用一些“老式”但兼容良好的做法：float方法。

这种就是一个父div包含2个子div，再对两个div左浮动。代码：

<div class="item">
      <div class='img-div'><img class='img' src='alien-filled.bmp' /></div>
      <div class='caption'>caption captioncaptioncaptioncaptioncaptioncacaptioncaptioncaptioncaptioncaptioncaptionptioncaptioncaptionccaptioncaptioncaptioncaptioncaptioncaptioncaptioncaptionaptioncaptioncaptioncaptioncaption</div>
    </div>

既然左浮动，就要清楚浮动，简单方法是在下面加个空标签：

<div class="item">
      <div class='img-div'><img class='img' src='alien-filled.bmp' /></div>
      <div class='caption'>caption captioncaptioncaptioncaptioncaptioncacaptioncaptioncaptioncaptioncaptioncaptionptioncaptioncaptionccaptioncaptioncaptioncaptioncaptioncaptioncaptioncaptionaptioncaptioncaptioncaptioncaption</div>
      <div style='clear:both;height:0;overflow:hidden;'></div>
    </div>

全部的style如下：

    .item{
      border:1px solid black;
    }
    .img-div{
      width:40%;
      float: left;
    }
    .img{
      width:100%;
    }
    .caption{
      float: left;
      width:59%;
      word-break:break-all;
      word-wrap:break-word;
      box-sizing: border-box;
      padding: 30px 0 0 30px;
    }

上面还加了对英文和数字不换行问题的处理：

word-break:break-all;
word-wrap:break-word;

这两个属性的用法：

1. word-break:break-all和word-wrap:break-word的相同点：

  都能使其容器如DIV的内容自动换行

2. 区别：

(1).word-break:break-all：

例如div宽200px，它的内容就会到200px自动换行，如果该行末端有个英文单词很长，它会把单词截断，变成该行末端为

conra(congratulation的前端部分)，下一行为tulation（conguatulation）的后端部分。

(2).word-wrap:break-word：

例子与上面一样，区别就是它会把congratulation整个单词看成一个整体，如果该行末端宽度不够显示整个单词，它会自动把整个单词放到下一行，而不会把单词截断掉的。