將第三浮動DIV與第一個div

Question

我的下一個HTML謝靈運，我不能改變它https://jsfiddle.net/fLjs43x7/：

HTML：

<div class="grid-parent"> 

    <div class="something"> 
    <div class="something-else"> 

     <div class="grid-100"> 
     </div> <!--- .grid-100 --> 

     <div class="grid-60"> 
     1 
     </div> <!-- .grid-60 --> 

    </div> <!-- .something-else --> 

    <div class="grid-60"> 
    2 
    </div> <!-- .grid-60 --> 
    </div> <!-- .something --> 

    <div class="grid-30"> 
    </div> <!-- .grid-30 --> 
</div> <!-- .grid-parent --> 

我希望把在同級別綠格與第一個藍色格。我怎樣才能做到這一點？這是可能的？

謝謝！

我想我找到了解決辦法：

我加

.something { 
height: 1px; 
overflow: visible; 
} 

我更改中間浮動DIV：

.grid-606 { 
display: inline-block; 
float: none; 
} 

這裏是整個代碼：https://jsfiddle.net/fLjs43x7/2/

Answer 1

我正在使用位置p roperty; 看到這個： - 希望它有幫助。

.grid-parent { 
 
    display: block; 
 
    width: 1000px; 
 
    height: 300px; 
 
    position:relative; 
 
    overflow: hidden; 
 
    
 
    background-color: red; 
 
} 
 

 
.grid-30, 
 
.grid-60, 
 
.grid-100 { 
 
    display: block; 
 
    float: left; 
 
    height: 50px; 
 
    margin-left: 10px; 
 
    margin-bottom: 10px; 
 
} 
 
.grid-100 { 
 
    width: 1000px; 
 
    background-color: yellow; 
 
} 
 

 
.grid-60 { 
 
    width: 600px; 
 
    background-color: blue; 
 
} 
 

 
.grid-30 { 
 
    width: 300px; 
 
    background-color: green; 
 
    position:absolute; 
 
    left:600px; 
 
    top:60px; 
 
}

<div class="grid-parent"> 
 

 
    <div class="something"> 
 
    <div class="something-else"> 
 
    
 
     <div class="grid-100"> 
 
     </div> <!--- .grid-100 --> 
 
     
 
     <div class="grid-60"> 
 
     1 
 
     </div> <!-- .grid-60 --> 
 
     
 
    </div> <!-- .something-else --> 
 
    
 
    <div class="grid-60"> 
 
    2 
 
    </div> <!-- .grid-60 --> 
 
    </div> <!-- .something --> 
 
    
 
    <div class="grid-30"> 
 
    </div> <!-- .grid-30 --> 
 
</div> <!-- .grid-parent -->