Platz dritte Schwimmer div auf gleicher Höhe mit dem ersten div

Question

ich die nächste html strcture haben, ich kann es nicht https://jsfiddle.net/fLjs43x7/ ändern:

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

I grün div auf gleicher Ebene platzieren möchten mit ersten blauen div. Wie kann ich das machen? Es ist möglich?

Vielen Dank!

Ich glaube, ich eine Lösung gefunden:

I

hinzugefügt

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

Und ich ändern, um den mittleren Schwimmer div:

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

Hier ist der gesamte Code: https://jsfiddle.net/fLjs43x7/2/

Answer 1

Ich benutze Position p Eigenschaft; Siehe dies: - hoffe, es hilft.

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