Platzieren Sie 2 Divs innerhalb eines anderen div mit anderen Rand

Question

Ich möchte 2 divs in einem anderen, aber die mit anderen margin-top, jedes Mal, wenn ich versuche, die margin-top des ersten eine zweite richtet richtet sich nach dem ersten. Nehmen wir an, dass first und second zwei divs in einem anderen div sind. Ich würde so etwas wie dies mag:

    second 

erste

Aber ich bin immer dies:

diese zweite

Sie können vielleicht eine klarere Vorstellung haben this Geige Besuch

Answer 1

Flexbox zur Rettung!

#wrapper { 
 
    display: flex; 
 
} 
 

 
.divF { 
 
    margin-top:20px; 
 
} 
 
/*Border added for demo so you can see what's happening*/ 
 
#wrapper { border: 1px solid #777; } 
 
.divF, .divS { border: 1px solid #CCC; }

<div id="wrapper"> 
 
    <div class="divF"> 
 
    <p>first</p> 
 
    </div> 
 
    <div class="divS"> 
 
    <a href=#>second</a> 
 
    </div> 
 
</div>

Answer 2

Probieren Sie die vertikale Ausrichtung aus: top; Überprüfen Sie den folgenden Code.

.divF{ 
 
    display:inline-block; 
 
    margin-top:20px; 
 
    vertical-align: top 
 
} 
 

 
.divS{ 
 
    display:inline-block; 
 
    vertical-align: top 
 
}

<div> 
 
<div class="divF"> 
 
<p> 
 
first 
 
</p> 
 
</div> 
 
<div class="divS"> 
 
<a href=#>second</a> 
 
</div> 
 
</div>