定位浮动div

Question

我想定位一些5个div。

2周的div浮动到左侧，堆放 1个中的div 2的div浮动到右侧

的问题是，2右格是停留在中间的div底下，甚至当我尝试做中间股票变小。

我该如何把正确的浮动div放在右边，而不是在我的中心div下？

Answer 1

<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> 

Answer 2

这是你想要的吗？

HTML：

<div class="container"> 
    <div class="box left"></div> 
    <div class="box left"></div> 

    <div class="box middle"></div> 

    <div class="box right"></div> 
    <div class="box right"></div> 
</div> 

CSS：

.container { 
    text-align: center; 
} 

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

.left { 
    float:left; 
} 

.middle { 
    display: inline-block; 
} 

.right { 
    float: right; 
} 

Here's a fiddle.

Answer 3

.topLeft { height：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; 


      }