css在此作物中并排浮动图像

我在CSS中有一个裁剪功能来在css中做方形图像.它获取图像并创建一个正方形.
它做得很好.我的问题是,一张图像在另一张图像上方,我不能将它们并排浮动.有任何想法吗？

CSS

.ccontent {
  float:left !important;
  display:inline-block !important;
}

.c{
  position: relative;
  width: 200px;
  height: 200px;
  overflow: hidden;
}
.c img{
  position: absolute;
  left: 50%;
  top: 50%;
  height: 100%;
  width: auto;
  -webkit-transform: translate(-50%,-50%);
  -ms-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
}
.c img.portrait {
  width: auto;
  height: auto;
}

树形象在海上：

见FIDDLE

HTML：
    

<div class='c'>
  <img src='http://img.558idc.com/uploadfile/allimg/210613/123A0KZ-0.jpg' alt='name1' class=portrait>
</div>

<div class='c'>
  <img src='https://upload.wikimedia.org/wikipedia/commons/2/2f/Grewia_tiliaefolia_tree_in_Chilkur,_Hyderabad_W_IMG_9418.jpg' alt='name1' class=portrait>
</div>

</div>

CSS：

.c{
 position: relative;
 float:left;
 width: 200px;
 height: 200px;
 overflow: hidden;
}
.c img{
 position: absolute;
 left: 50%;
 top: 50%;
 height: 100%;
 width: auto;
 -webkit-transform: translate(-50%,-50%);
 -ms-transform: translate(-50%,-50%);
 transform: translate(-50%,-50%);
}
.c img.portrait {
 width: auto;
 height: auto;
}

https://jsfiddle.net/z0370m0o/