Html 定位浮动div

我正在尝试定位5个分区

两个div向左浮动，堆叠在一起 1中分区 2个div向右浮动

问题是，2个右div卡在中间div的下方，即使我尝试将中间div变小

如何将右侧浮动div放在右侧而不是中间div的下方？

<div class="wrap">
  <div class="col-l">
    <div>your 1st div</div>
    <div>your 2nd div</div>
  </div>
  <div class="col-m">your 3rd div</div>
  <div class="col-r">
    <div>your 4th left div</div>
    <div>your 5th left div</div>
  </div>
</div>
<style>
.wrap { width: 900px; clear: both; overflow: hidden; }
.col-l { width:　300px; float: left; }
.col-m { width: 200px;  float: left; }
.col-r { width: 400px; float: right; }
</style>

你的第一组
你的第二组
你的第三组
你的第四个左div
你的第五个左分区
.wrap{width:900px；clear:both；overflow:hidden；}
.col-l{宽度：　300px；浮点：左；}
.col-m{宽度：200px；浮点：左；}
.col-r{width:400px；float:right；}

这就是你想要的吗

HTML:

左上角{ 高度：310px

                     width: 200px;

                     float: left;

        margin-bottom:50px;

             }
    .nextLeft {
                     height: 700px;

                     width: 200px;

         clear: both;

                     float: left; 
             }



    .middle{

    margin:0 230px;

    width:700px;





    }
           .topRight {

                    height: 200px;

                     width: 200px;

                     float: right;


                     }
             .nextRight {
                     height:200px;

                     width: 200px;

        border-radius: 1em 2em;                         
                     float: right; 

        clear: both; 


             }

---

你能提供一个草图或图片吗？你能给我们提供一些JSFIDLE中的代码吗？这是我做的代码。我希望正确的浮动元素从中间div下面移动。

.container {
    text-align: center;
}

.box {
    border: 1px solid black;
    height: 100px;
    width: 100px;
}

.left {
    float:left;
}

.middle {
    display: inline-block;
}

.right {
    float: right;
}

                     width: 200px;

                     float: left;

        margin-bottom:50px;

             }
    .nextLeft {
                     height: 700px;

                     width: 200px;

         clear: both;

                     float: left; 
             }



    .middle{

    margin:0 230px;

    width:700px;





    }
           .topRight {

                    height: 200px;

                     width: 200px;

                     float: right;


                     }
             .nextRight {
                     height:200px;

                     width: 200px;

        border-radius: 1em 2em;                         
                     float: right; 

        clear: both; 


             }