改变窗口大小，两个div乱码

两个div并排显示
css为.

.safescore{
 width: 32%;
 height: 341px;
 border: 1px #DDDDDD solid;
 display: inline-block;
 position: relative;
 margin-right:18px;
}
.trend{
width: 66.14%;
height: 341px;
border: 1px #DDDDDD solid;
display: inline-block;
vertical-align: top;  

}

为了设置两个盒子的距离，使用margin-right来改变距离，发现这样随着窗口的改变会扰乱布局，总有个距离为右边距，当窗口改变时，距离不变，打乱布局
改用float解决

.safescore{
 width: 32%;
 height: 341px;
 border: 1px #DDDDDD solid;
 display: inline-block;
 position: relative;
}
.trend{
    width: 66.14%;
    height: 341px;
    border: 1px #DDDDDD solid;
    display: inline-block;
    vertical-align: top;
    float: right;
}

整体html

   <div class="bottom1">
            <div class="safescore">
           </div>  
        <div class="trend">
         </div>
    </div>