Question

我试图定位5个div。

2个div向左浮动，堆叠 1中间div 浮动到右边的2个div

问题在于，即使我尝试使中间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;
}

Here's a fiddle.

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; 


             }

定位浮动div

3 个答案: