Div Floating left down down

Question

我將在一個包裝中有一個三個子div，其中兩個需要向右浮動，一個總是向左浮動（其中一個有.main類）。你可以看看我的HTML結構的小提琴

My Fiddle Here

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

但左浮動股利總是下。有人能幫助我理解這種行爲。

注意：我不想更改我的HTML結構。

Answer 1

添加以下到main類在你的CSS文件：

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