定位浮动潜水器

Question

我正在尝试定位一些5个div。

2个潜水器向左浮动，堆叠1个中间div2个div浮动到右侧

问题是右边的2个div被卡在中间的div下面，即使我试图缩小中间的div。

如何将右边的浮动div放在右边，而不是放在中心div的下面？？？

Answer 1

这就是你想要的吗？

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

这是一把小提琴。

Answer 2

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

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

             }