不使用flex布局，使用float实现聊天框对话功能，兼容性写法

不使用flex布局，使用float实现聊天框对话功能，兼容性写法

IE10+、Edge、Firefox 2+、Chrome 4+、Safari 3.1+支持flex布局
项目要求兼容到ie9 所以只能写float来实现聊天框功能

页面

<div class="left-container">
    <div class="contact-container" ref="replyContainer" v-if="chatList.length>0">
        <div class="items" :key="index" v-for="(item,index) in chatList">
          <div class="clearfix" :class="[item.flag == 1?'left':'right']" >
            <div class="info">
              <div class="avatar"></div>
              <span class="name">{{item.flag==1?chat.sideName:chat.myName}}</span>
            </div>
            <div class="content" style="height:100%">
              {{item.content}}
            </div>
            <div class="time">{{item.createTime}}</div>
          </div> 
        </div>
      </div>
      <div class="send-container">
        <div class="clearfix">
          <a-input class="leaveWord" placeholder="请输入留言" v-model="content" @keyup.enter="send" v-placeholder></a-input>
          <a-button class="sendButton" type="primary" @click="send">发送</a-button>
        </div>
      </div>
    </div>

css

.left-container{
  width: 100%;
  border: 1px solid rgb(238, 236, 236);
  border-radius: 6px;
  position: relative;
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
  .contact-container{
    padding: 20px;
    margin-bottom: 50px;
    min-height: 700px;
    max-height: 800px;
    overflow: auto;
    .items{
      width: 100%;
      margin-bottom: 20px;
      .info{
        width: 100%;
        height: 40px;
        margin-bottom: 4px;
        .avatar{
          width: 40px;
          height: 40px;
          border: 0.01rem solid #ccc;
          border-radius: 50%;
          float: left;
        }
        .name{
          font-size: 14px;
          line-height: 40px;
          color: #4d4c4c;
          margin:0 10px;
          white-space: nowrap;
        }
      }
      .content{
        max-width: 70%;
        border: 1px solid rgba(143, 141, 141, 0.1);
        background-color: rgba(153, 152, 152, 0.1);
        box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
        border-radius: 5px;
        padding: 10px 16px;
        word-break: break-all;
        font-size: 14px;
        color: #595959;
      }
      .time{
        width: 100%;
        text-align: center;
        font-size: 12px;
        margin-top:10px;
        color: #8e8d8d;
      }
    }
    .items .left {
      .info, .time{
        float: left;
      }
      .content{
        float: left;
        margin-left: 46px;
      }
    }
    .items .right {
      .info{
        float: right;
        .avatar,.name{
          float: right;
        }
      }
      .content{
        float: right;
        margin-left: 46px;
        margin-right: 50px;
      }
      .time{
        float: right;
      }
    }
    .items:nth-last-child(1){
      margin-bottom: 44px;
    }
  }
  .send-container{
    position: absolute;
    bottom: 10px;
    width: 100%;
    div{
      margin: 0 4%;
      .leaveWord{
        width: 84%;
        margin-right: 2%;
      }
      .sendButton{
        width: 14%;
        float: right;
      }
    } 
  }
}