Question

我将在一个包装器中有一个三个子div，其中两个需要向右浮动，一个将始终向左浮动（一个具有.main类）。您可以在小提琴中查看我的HTML结构

HTML：

<div id="wrap">
    <div class="child"> 
        This is initiator
    </div>
    <div class="child">
        This is second joinee
    </div>
    <div class="main child">
        This is third joinee
    </div>
</div>

CSS：

#wrap{
  width:600px;
  height:400px;
}
.child:nth-child(even){
  background:red;
}
.child:nth-child(odd){
  background:green;
}
.child{
  height: 200px;
  width: 200px;
  display: block;
  float: right;
  clear:right;
  text-align: center;
  vertical-align: middle;
}
.main{
  height: 400px!important;
  width: 400px!important;
  float:left!important;
  clear:none!important;
  background:yellow !important;
}

但左边漂浮的Div总是降下来。有人可以帮助我理解这种行为。

注意：我不想更改我的HTML结构。

Answer 1

将以下内容添加到css文件中的main类：

.main{
    position:absolute;
    left:0;
}

Div Floating left下降

1 个答案: