余白の異なる別のdiv内に2つのdivを配置します

Question

margin-topを別の1つの中に入れたいのですが、最初にmargin-topを設定しようとするたびに、2番目のものが最初のものに従って整列します。 firstとsecondは、divsが別のdivの2つであるとします。私はこのような何か希望：

    second 

最初にしかし、私はこれを取得しています：

この第二

あなたは多分thisフィドル

Answer 1

フレキシボックス！

#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

訪問明確な考えを持つことができますvertical-alignを試してください：top;以下のコードを確認してください。救助へ

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